CSS3 animation介绍

朴灿烈づ我的快乐病毒、 2022-05-24 08:45 124阅读 0赞

上一篇[transition][]过渡属性通过让属性在时间段内根据贝塞尔曲线平滑过渡，呈现出动画效果，但毕竟功能有限。本篇介绍的animation属性和传统的动画制作一样，能控制帧的每一步，制作出更强大的动画效果。

和其他CSS3属性类似，animation包含很多子属性，我们一起看看：

*  animation-name
 *  animation-duration
 *  animation-timing-function
 *  animation-delay
 *  animation-iteration-count
 *  animation-direction
 *  animation-play-state
 *  animation-fill-mode
 *  @keyframes

**animation-name**指定@keyframes的名字，CSS加载时会应用该名字的@keyframes规则来实现动画

**animation-duration**动画持续时间，默认是0表示无动画，单位可以设s秒或ms毫秒

**animation-timing-function**动画播放方式，默认值`ease`，可以设`linear`，`ease`，`ease-in`，`ease-out`，`ease-in-out`，`cubic-bezier(n,n,n,n)`，`steps`。关于贝塞尔曲线和steps可以参照上一篇[transition][]，和transition-timing-function类似，不多赘述。

**animation-delay**延迟开始动画的时间，默认值是0，表示不延迟，立即播放动画。单位是s秒或ms毫秒。允许设负时间，意思是让动画动作从该时间点开始启动，之前的动画不显示。例如-2s 使动画马上开始，但前 2 秒的动画被跳过。

**animation-iteration-count**动画循环播放的次数，默认值为1，即放完一遍后不循环播放。除数字外也可以设关键字`infinite`表示无限循环播放。

**animation-direction**动画播放的方向，可设`normal`，`alternate`，`alternate-reverse`。默认值是normal表示正常播放动画。alternate表示轮转正反向播放动画，即动画会在奇数次（1，3，5…）正常播放，而在偶数次（2，4，6…）反向播放。alternate-reverse正好反过来，奇数次反向播动画，偶数次正向播动画。看效果点[这里][Link 1]

.myDiv1 { width: 75px; height: 75px; background-color: red; position:relative; animation:aDirection 5s infinite; } @keyframes aDirection { from { left:0px;} to { left:200px;} } .alter { animation-direction:alternate; } .alterR { animation-direction:alternate-reverse; } <div class="myDiv1"></div> <div class="myDiv1 alter"></div> <div class="myDiv1 alterR"></div>

有什么用呢？其实例子页面就能看到alternate/alternate-reverse的动画效果可以平滑地实现反转效果。例如例子页面中闪烁提示的例子。你可以用text-decoration: blink来实现闪烁，但它的功能有限支持有限。用CSS3动画实现的闪烁效果更棒。（当然闪烁的使用必须克制，要定时定次数，不能无限闪。无限闪通常会让用户很生气后果很严重）：

@keyframes blink { to { color: transparent } //文字色平滑过渡到透明 } .blink { animation: .5s blink 6; //触发动画6次，因为设了alternate，所以看上去闪烁了3次 animation-direction: alternate; }

**animation-play-state**动画的状态，可设`running`，`paused`。默认值running表示正在播放动画，paused表示暂停动画。通常在JS端使用该属性`object.style.animationPlayState=”paused”`来暂停动画。

**animation-fill-mode**动画的时间外属性，可设`none`，`forwards`，`backwards`，`both`。默认值none表示动画播完后，恢复到初始状态。forwards当动画播完后，保持@keyframes里最后一帧的属性。backwards表示开始播动画时，应用@keyframes里第一帧的属性，要看出效果，通常要设animation-delay延迟时间。both表示forwards和backforwards都应用。

例如设置2s的延迟时间。初始为红色，第一帧动画变为绿色，最后一帧动画变为蓝色。看效果点[这里][Link 1]

.myDiv2 { width: 75px; height: 75px; background-color: red; position:relative; animation:mymove 5s 1 2s; } @keyframes mymove { from { left:0px; background-color:green;} to { left:200px; background-color: blue;} } .forwards { animation-fill-mode:forwards; } .bkforwards { animation-fill-mode:backwards; } .both { animation-fill-mode:both; } <div class="myDiv2"></div> <div class="myDiv2 forwards"></div> <div class="myDiv2 bkforwards"></div> <div class="myDiv2 both"></div>

图1不解释了，最正常的效果，初始为红色，动画开始成绿色，动画结束成蓝色，结束后恢复初始状态红色。图2设成forwards，和图1的区别是动画结束后不恢复初始状态，仍旧是蓝色。图3设成backwards，在动画开始前（即延迟时间段内）应用第一帧的动作，设成了绿色，动画结束后恢复原始状态。图4设成both兼具forwards和backwards的效果。

**@keyframes**动画帧就是区别animation和transition的关键。在[transition][]中是无法更细致地控制时间段内执行的动作的，而在animation中用@keyframes可以细致地指定第一帧要干什么，第二帧要干什么。

语法：@keyframes开头，后接animation-name。实体内可以创建%百分比来划分时间段。关键字from等于0%，to等于100%。

@keyframes mymove { 0% { top:0px; left:0px; background:red;} 25% { top:0px; left:100px; background:blue;} 50% { top:100px; left:100px; background:yellow;} 75% { top:100px; left:0px; background:green;} 100% { top:0px; left:0px; background:red;} }

为节约篇幅，各种浏览器前缀均省略，如Firefox用@-moz-keyframes，Chrome和Safari用@-webkit-keyframes，Opera用@-o-keyframes。提醒一下@keyframes只是定义了一个动画效果，但要使动画生效，必须用animate属性将动画绑定到具体某DOM元素上才行。

你可以单独指定上面这些子属性，也可以像background等属性一样，合并在animation属性里指定。例如`animation: moveten 1s step(10,end) infinite alternate 3s backwards;`。但合并时要注意，因为有animation-duration和animation-delay都是时间，浏览器会根据先后顺序，将第一个时间认作为animation-duration，第二个时间认作为animation-delay。

分开指定可能代码清晰点，但因为页面需要适应各浏览器时，每个都要加上-ms，-moz等前缀的话代码会变的很多，合并在一起代码稍微少点。

另外也可以同时指定多个动画效果，例如`animation: moveten1 1s ease .5s, moveten2 2s ease 1s forwards;`

### 总结 ###

animation的参数不算多，但知道理论是一回事，能否写出精妙的动画效果是另一回事。除非你特有天赋，否则可以借鉴牛人们的设计。例如[Dan Eden][]的[animate.css][]动画库，里面设计出的贝塞尔曲线能让动画效果非常逼真。

CSS3里三大动画相关属性transform，transition，animation基本内容就介绍完了。有些子属性如果不明白原理的话，代码给你都很难改，更别说自己写。现在看到酷炫的动画效果，可以试着看看源码，并对照着改成自己想要的效果。下一篇将介绍一些常见实用的动画效果。

作者：张歆琳  
链接：https://www.jianshu.com/p/ed11f8c26992  
來源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[transition]: https://www.jianshu.com/p/56f8ddafc63f
[Link 1]: https://link.jianshu.com?t=http://www.jackzxl.net/wp-content/MyFile/2016/06/animation.html
[Dan Eden]: https://link.jianshu.com?t=https://github.com/daneden
[animate.css]: https://link.jianshu.com?t=https://github.com/daneden/animate.css