animation of css

CSS3中添加的新属性animation是用来为元素实现动画效果的。但是animation无法单独担当起实现动画的效果。

用animation调用动画效果函数。比如会用动效的名字，用多长时间完成这个动效，这个动效只执行一次还是一直循环执行。

animation: myanimation 3s infinate;infinate是无限循环的意思。

用keyframe定义动画效果。

        @keyframe myanimation {
            from{animation code}
            to{animation code}
        }
        

我要飞，我要飞。
啊。。。。。。
谁TMD把我拽下来了。。。。。。

 1     </style>
 2         #cartoon {
 3             background-color: yellow;
 4             height: 100px;
 5             width: 200px;
 6             animation: animationdiv 3s;
 7         }
 8         @keyframes animationdiv {
 9             from{
10                 position: absolute;
11                 top: 500px;
12                 left: 0;
13             }
14             to {
15                 position: absolute;
16                 top: 100px;
17                 left: 500px;
18             }
19         }
20     </style>
21     <div id="cartoon">我要飞，我要飞。<br>啊。。。。。。谁TMD把我拽下来了。。。。。。<br>TMD把我拽下来了。。。。。。</div>

Reference

CSS3新增样式大解析：[8]animation之元素动画