CSS3动画

调用动画

	 div{
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
            left: 0;
 			animation：动画名称 花费的时间 运动曲线 等待时间 播放次数（infinite 无限播放） 是否反方向播放
    		animation: move 03s linear 1s 3 alternate;/*默认正方向*/
        }

声明动画
当在@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

1.规定动画的名称

2.规定动画的时长

        @keyframes move{
        //from表示开始
        //to表示结束
            /*from{*/
                /*left:0;*/
            /*}*/
            /*to{*/
                /*left: 800px;*/
            /*}*/
	//也可以用百分比来表示动过的过程
            0%{
                left: 0;
                top: 0;
            }
            33.3333333333333%{
                top: 300px;
            }
            66.66666666%{
                left: 300px;
                top:20px;
            }
            100%{
                left: 800px;
            }
        }

CSS3的动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。