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: 6            border-radius: 50%;
 7        }
 8         50%{
 9             width: 200px;
10             height:11             border-radius:12         }
13         100%{
14 15 16 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>
<html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>animation</title>
 6 </head>
 7 <style type="text/css">
    .box{
        width:        height:        margin: 50px auto;                              水平居中12         background-color: #f00;                         设置红色13     }
14     .box:hover{
       animation-name:myframe;                         要使用的关键帧动画的名称        animation-delay: 100ms;                        鼠标放上后延迟100ms发生动画17         animation-duration: 1s;                        动画持续一秒18        animation-timing-function:ease-in;              加速播放19        animation-iteration-count: infinite;            循环播放20     }
21     22 23 24 25 26 27        }
28 29 30 31 32         }
33 34 35 36 37         }
38     }
39 
40 </style>
41 <body>
42 <div class="box"></div>
43 </body>
44 </html>

CSS动画效果之animation

相关文章