首页 > 代码库 > CSS动画效果之animation
CSS动画效果之animation
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>
CSS动画效果之animation