Y(^o^)Y
css动画大乱弹之animation。
概述
什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧)。@keyframe算是一个动画模板。在其中,可以使用百分比,如从0%到100%的任意值,分别在每个百分比中,加上不同的属性,从而让元素达到一种在不断变化的动画效果。这和我们制作flash动画一样,我们只需设计几个关键帧,系统就能生成动画啦!
一个@keyframe例子:
1 /*定义关键帧动画*/
2 @keyframes myframe {
3 0%{
4 width: 100px;
5 height: 100px;
6 border-radius: 50%;
7 }
8 50%{
9 width: 200px;
10 height: 200px;
11 border-radius: 50%;
12 }
13 100%{
14 width: 100px;
15 height: 100px;
16 border-radius: 50%;
17 }
18 }
分别定义了动画0%(开始时),50%(播放一半时),100%(播放结束时)的效果,浏览器就能直接生成动画了。
ok,回到上面的问题:什么是animation?animation就是利用关键帧来设置动画的一个工具。可以这么想,关键帧就是一个“动画模型”,animation就是“播放器模型”。
animation的常用属性
1.animation-name: @keyframe动画的名称。
2.animation-duration: 动画完成一个周期需要的时间,默认是0。
3.animation-timing-function:动画的速度趋势(缓动效果),默认是ease。
4.animation-delay: 动画开始的延迟时间,默认是0。
5.animation-iteration-count: 动画播放的次数,默认是1。可以使用数字,也可以使用“infinite”,表示无限次循环播放。
6.animation-direction: 动画下一次播放的顺序,可以顺序或逆序,默认是"normal"。
7.animation-play-state: 动画是否正在运行或暂停,默认是"running"。
8.animation-fill-mode: 对象动画时间之外的状态。
animation与transition的区别
animation是针对@keyframe而言的,它只是在事件发生时触发动画,但是并不改变原来的属性,当事件完成,又恢复原样。transition强调是过渡动画,它是确确实实改变了属性。
实例
在浏览器中央有一个红色的正方形,鼠标放上去,变为圆形。鼠标移除,变为正方形。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>animation</title>
6 </head>
7 <style type="text/css">
8 .box{
9 width: 100px;
10 height: 100px;
11 margin: 50px auto; /*水平居中*/
12 background-color: #f00; /*设置红色*/
13 }
14 .box:hover{
15 animation-name:myframe; /*要使用的关键帧动画的名称*/
16 animation-delay: 100ms; /*鼠标放上后延迟100ms发生动画*/
17 animation-duration: 1s; /*动画持续一秒*/
18 animation-timing-function:ease-in; /*加速播放*/
19 animation-iteration-count: infinite; /*循环播放*/
20 }
21 /*定义关键帧动画*/
22 @keyframes myframe {
23 0%{
24 width: 100px;
25 height: 100px;
26 border-radius: 50%;
27 }
28 50%{
29 width: 200px;
30 height: 200px;
31 border-radius: 50%;
32 }
33 100%{
34 width: 100px;
35 height: 100px;
36 border-radius: 50%;
37 }
38 }
39
40 </style>
41 <body>
42 <div class="box"></div>
43 </body>
44 </html>