CSS动画基础

CSS 动画

创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现。

CSS animation

• CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
• animation 属性用来指定一组或多组动画，每组之间用逗号相隔。
• 初始值：
  • animation-name: none
  • animation-duration: 0s
  • animation-timing-function: ease
  • animation-delay: 0s
  • animation-iteration-count: 1
  • animation-direction: normal
  • animation-fill-mode: none
  • animation-play-state: running
  • animation-timeline (en-US): auto

animation 的子属性:

• animation-name
  指定由 @keyframes 描述的关键帧名称。
• animation-duration
  设置动画一个周期的时长。
• animation-timing-function
  设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
• animation-delay
  设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
• animation-iteration-count
  设置动画重复次数， 可以指定 infinite 无限次重复动画
• animation-direction
  设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
• animation-fill-mode
  指定动画执行前后如何为目标元素应用样式。
• animation-play-state
  允许暂停和恢复动画。

使用 keyframes 定义动画序列

一旦完成动画的时间设置， 接下来就需要定义动画的表现。通过使用 @keyframes 建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

因为动画的时间设置是通过 CSS 样式定义的，关键帧使用 percentage 来指定动画发生的时间点。0% 表示动画的第一时刻，100% 表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from 和 to。这两个都是可选的，若 from/0% 或 to/100% 未指定，则浏览器使用计算值开始或结束动画。

也可包含额外可选的关键帧，描述动画开始和结束之间的状态。

示例

• 动画：上下浮动。
• 代码：

<div class="box slide"/>

.box {
  width: 300rpx;
  height: 160rpx;
  background-color: rgb(65, 114, 98);
}

.slide {
  animation: slide 1.5s  linear infinite both;
  -webkit-animation: slide 1.5s  linear infinite both;
}

@-webkit-keyframes slide {
  25% {
    transform: translateY(-4px);
    transform: translateY(-4px);
  }

  50%,
  100% {
    transform: translateY(0);
    transform: translateY(0);
  }

  75% {
    transform: translateY(4px);
    transform: translateY(4px);
  }
}

@keyframes slide {
  25% {
    transform: translateY(-4px);
    transform: translateY(-4px);
  }

  50%,
  100% {
    transform: translateY(0);
    transform: translateY(0);
  }

  75% {
    transform: translateY(4px);
    transform: translateY(4px);
  }
}

END

参考文档