[分享]css3动画走曲线运动

CSS3动画是一种非常好用的网页开发工具，它可以实现各种酷炫的效果，比如走曲线运动。下面我们来介绍如何实现这个效果。/首先，我们需要一个HTML元素来展示动画/ /然后我们定义css样式/ .mov...

CSS3动画是一种非常好用的网页开发工具，它可以实现各种酷炫的效果，比如走曲线运动。下面我们来介绍如何实现这个效果。

/*首先，我们需要一个HTML元素来展示动画*/
<div class="move"></div>

/*然后我们定义css样式*/
.move {
  width: 50px; /*元素宽度*/
  height: 50px; /*元素高度*/
  background-color: #ff6a00; /*元素背景色*/
  border-radius: 50%; /*元素圆角*/
  position: absolute; /*元素定位*/
  left: 0px; /*元素初始位置*/
  top: 50px; /*元素初始位置*/
  animation: move 5s linear infinite; /*运动动画*/
}

/*接下来，我们定义动画*/
@keyframes move {
  0% {
    left: 0px;
    top: 50px;
  }
  25% {
    left: 200px;
    top: 0px;
  }
  50% {
    left: 400px;
    top: 50px;
  }
  75% {
    left: 200px;
    top: 100px;
  }
  100% {
    left: 0px;
    top: 50px;
  }
}

/*最后，我们解释一下动画的含义*/
从0% - 25%，元素向右上方运动，走了一条直线。
从25% - 50%，元素沿着一个上升的曲线运动。
从50% - 75%，元素向右下方运动，走了一条直线。
从75% - 100%，元素沿着一个下降的曲线运动。
这样，我们就完成了走曲线运动的动画效果。