animation动画(二)

传送门

老规矩,二系列来谈谈具体每个动画属性的含义和用法,算是一个对知识点的总结吧。

animation-name 动画名称

CSS语法:animation-name: shrink

用来设置元素的动画名称。

animation-duration 持续时间

CSS语法:animation-duration: 1s

用来指定动画在一个周期内所花费的时间。

animation-timing-function 运动曲线

CSS语法:animation-timing-function: ease-in-out

用来设置元素的动画速度曲线,它的用法和 transition-timing-function 类似,想要了解详情的直接点这个链接吧。

DEMO

animation-delay 动画延迟

CSS语法:animation-delay: 1s

用来设置动画延迟多少秒/毫秒后才开始执行。正值(例如2s)将在2s后启动动画;负值(例如-2s)将立即执行动画,但是动画会从它的动画序列中的第2s位置处立即开始。

animation-iteration-count 循环次数

CSS语法:animation-iteration-count: 1s

用来设置动画循环的次数,默认值是1,表示动画只播放一次。除了使用正整数来设置次数外,还可以将值设置为 infinite ,表示无限循环。

animation-direction 是否反向

CSS语法:animation-direction: normal | reverse | alternate | alternate-reverse

用来设置动画在循环过程中是否反向运动,默认值为 normal ,即正常模式,动画会从第一帧播放到最后一帧;reverse 表示反向模式,动画会从最后一帧倒着播放到第一帧;alternate 设置动画先正向播放,第二次再从反向播放,交替进行,例如 animation 系列一中的案例;alternate-reverse 则是先让动画反向播放,第二次再正向播放,交替进行。

animation-fill-mode 动画填充模式

CSS语法:animation-fill-mode: none | forwards | backwards | both

用来指定在动画执行之前和之后如何给动画的目标应用样式。这个属性在我第一次接触时没太理解,直到我看了 segmentfault 上的 这篇文章

在理解它之前,我们需要在脑海里有个概念,那就是一个动画是分为初始状态、等待期、动画执行期、完成期四个阶段的。而上面 animation-fill-mode 接收的四个值则分别对应:

  • none 表示 等待期和完成期,元素样式都为初始状态样式,不受动画定义(@keyframes)的影响
  • forwards 表示等待期保持初始样式,完成期间保持最后一帧样式
  • backwards 表示等待期为第一帧样式,完成期跳转为初始样式
  • both 表示 等待期样式为第一帧样式,完成期保持最后一帧样式

单纯的文字不直观?相信下面的这个demo能让你豁然开朗:

animation-play-state 动画播放状态

CSS语法:animation-play-state: running | paused

用来设置动画的播放或者暂停。比如希望在鼠标经过的时候,让动画先停止下来,鼠标移开之后再继续播放,就可以通过设置 .element:hover { animation-play-state: paused; } 来实现。下面是一个案例,在鼠标移入时钟后指针暂停旋转;移出后时钟继续旋转。