css 中 keyframes 的使用

keyframes 的翻译是关键帧的意思，就好比视频是由一张图片和一张图片拼接起来，两张图片之间的部分由软件填充。

// move 是动画的名称
@keyframes move {
  to {
    transform: rotate(360deg);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  // 设置动画 动画的名称(move) 持续时长(3s) 动画效果（infinite）
  animation: move 3s infinite;
}

通过百分比设置动画

@keyframes move {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(150px);
  }
  50% {
    transform: translateX(300px);
  }
  75% {
    transform: translateX(150px);
  }
  100% {
    transform: translateX(0);
  }
}

在对应的节点上，设置属性，实现对动画效果的控制。通过设置百分比位置的属性值，元素会运动到对应的位置上，中间的动画由系统填充。

通过 to 和 from 设置动画

to 和 from 相当于 关键帧的 0% 和 100%：

@keyframes move {
  to {
    transform: translateX(300px);
  }
  from {
    transform: translateX(0);
  }
}

点个赞再走吧，欢迎关注(●’◡’●)ﾉ♥