css动画

CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。

动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

动画配置

创建动画序列,需要使用animation属性或其子属性

动画的实际表现是由@keyframes规则实现

animation属性:

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

animation-delay

定义动画于何时开始

animation-direction

指示动画是否反向播放

  • normal(默认) 动画循环结束,动画重置到起点重新开始
  • alternate 动画交替反向运行
  • reverse 反向运行动画,每周期结束动画由尾到头运行
  • alternate-reverse 反向交替, 反向开始交替

animation-duration

指定一个动画周期的时长

animation-iteration-count

定义动画循环次数

  • infinite 无限循环播放动画.

animation-fill-mode

设置CSS动画在结束之后的表现

  • none(默认) 显示原值
  • forwards 显示最后一个关键帧
  • backwards 显示为第一个关键帧
  • both

animation-timing-function

规定动画的速度曲线

  • ease(默认) 动画以低速开始,然后加快,在结束前变慢。
  • linear 动画从头到尾的速度是相同的。
  • ease-in 动画以低速开始。
  • ease-out 动画以低速结束。
  • ease-in-out 动画以低速开始和结束。