css3：animation属性

1 基本使用

制作动画分为两步：

1. 定义动画 @keyframes
2. 使用(调用)

2 @keyframes(关键帧) 定义动画

@keyframes animation{
	0%{
	...
	}
	100%{
	...
	}
}

• 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
• 在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
• 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
• 请用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100%

3 简写属性

 /* name：动画名字  
    duration：持续时间 
    timing-function：速度曲线 
    delay：延迟  
    iteration-count：重复次数 
    direction：是否逆向播放 
    fill-mode：结束后状态
*/

    animation: name duration timing-function delay iteration-count direction fill-mode;

  1.direction

        aniamtion-direction: norma | reverse | alternate | alternate-reverse

• normal 默认的
• reverse 从终点运动向起点 终点=>起点
• alternate 到达终点后是否原路返回( 起点=>终点=>起点 ) 当 animation-iteration-count < 2 时无效
• alternate-reverse 终点=>起点=>终点 animation-iteration-count < 2 时无效

  2.fill-mode

        aniamtion-fill-mode:forwards | backwards

• forwards 保持当前位置
• backwards 回到初始位置

  3.timing-function

 steps 理解为动画从头到尾，需要多少步来完成。

  4.iteration-count

• 不填默认一次
•  infinite  无限次

4 初步使用

div{
            width:120px;
            height:120px;
            line-height:120px;
            margin: 20px;
            background-color: #5cb85c;
            float: left;
            font-size: 12px;
            text-align: center;
            color:orangered;
            animation: move 5s linear infinite ;
        }
        @keyframes move {
            0% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(90deg);
            }
            50% {
                transform: rotate(180deg);
            }
            75% {
                transform: rotate(270deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }