css3动画沿轨迹运动，css3物体沿圆环运动

前言

我们在运用css3动画实现轨迹运动的时候，点 A 到点 B 的直线运动，很好实现，而且我们还可以运用贝塞尔曲线，实现运动速度的调整。但是假如我们要实现沿着某个路径运动，或者沿着圆环运动，那么应该如何实现呢？

实现方式一

每个轴执行自己的动画函数。效果如下：

实现代码如下：

<div class="haorooms-dot "></div>
<style>
    .haorooms-dot {
        width:20px;
        height:20px;
      -webkit-animation: xAxis 2.5s infinite ease-in;;
      animation: xAxis 2.5s infinite ease-in;
        position:relative;

    }

    .haorooms-dot::after {
      content: 'haorooms';
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 20px;
      background-color: #fff;
      -webkit-animation: yAxis 2.5s infinite ease-out;
      animation: yAxis 2.5s infinite ease-out;
        position:absolute;
    }

    @-webkit-keyframes yAxis {
      50% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-transform: translateY(-150px);
        transform: translateY(-150px);
      }
    }

    @keyframes yAxis {
      50% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function:ease-out;
        -webkit-transform: translateY(-150px);
        transform: translateY(-150px);
      }
    }

    @-webkit-keyframes xAxis {
      50% {
        -webkit-animation-timing-function:ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: translateX(150px);
        transform: translateX(150px);
      }
    }

    @keyframes xAxis {
      50% {
        -webkit-animation-timing-function:ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: translateX(150px);
        transform: translateX(150px);
      }
    }
</style>

上面方法是运用2个元素叠加，一个沿着X轴方向，一个沿着Y轴方向。我们就得到了弧形路径。

实现方式二

也是运用叠加方式实现弧形运动，实现效果如下：

代码如下：

<div class="haorooms"> <em></em></div>
<style>
.haorooms{
  position: absolute; top: 50px; left: 50px;
  -webkit-animation: clockwise 1.5s linear infinite; animation: clockwise 1.5s linear  infinite ;
  transform-origin: 80px 80px;
}

.haorooms em {
    display: block;
    width: 40px; height: 40px;
    background: red;
      color:fff;
    -webkit-animation: counter-clockwise 1.5s linear infinite; animation: counter-clockwise 1.5s linear  infinite ;
}

@-webkit-keyframes clockwise{
  0%  { -webkit-transform: rotate(0deg) ;  }
  100%{ -webkit-transform: rotate(360deg); }
}

@keyframes clockwise {
  0%  { transform: rotate(0deg) ; }
  100%{ transform: rotate(360deg); }
}

@-webkit-keyframes counter-clockwise {
  0%  { -webkit-transform: rotate(360deg) ;  }
  100%{ -webkit-transform: rotate(0deg); }
}

@keyframes counter-clockwise {
  0%  { transform: rotate(360deg) ;  }
  100%{ transform: rotate(0deg); }
}
</style>

2层叠加，可以让文字看起来不旋转。transform-origin ，可以指定旋转圆点的横坐标和纵坐标。

问题

按照上面，假如我们就想让一个元素从一个点，按照弧形，运动到另外一个点，然后就在另外那个点的地方停止。针对这个需求，我们应该如何实现呢？ 就是如下效果：

我们只需要把infinite 去掉，默认让其只执行一次！

那么如何 实现css3 使用animation 只执行一次然后停留在执行后的状态？

我们用到了如下参数：

animation-fill-mode：forwards；

forwards含义是设置对象状态为动画结束时的状态。加了这个参数之后，就可以实现我们想要的效果了！