Css3动画.md

Css3可以实现动画，代替原来的Flash和JavaScript方案。
首先，使用 @keyframes定义一个动画，名称为testAnimation,代码如下，通过百分比设置不同的CSS样式，规定动画的变化。

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

然后，通过选取一个元素，设置动画，以div为例

div {
   width: 100px;
   heihgt: 50px;
   position: absolute;

    animation-name: myanimation;  //动画名称
    animation-duration: 5s;   //动画持续时间
    animation-timing-function: ease  // 动画运动曲线函数
}