四、transition过渡和animation动画

1、transition

CSS3的过渡功能就像是一种黄油，可以让CSS的一些变化变得平滑。因为原生的CSS过渡在客户端需要处理的资源要比用JavaScript和Flash少的多，所以才会更平滑。

1、用法综合写法： transition: width 1s 1s linear,height 1s 1s linear;

分开分析：

transition-property: width,font-size;/*要过渡的属性*/
transition-duration: 1s;/*过渡进行的时间*/
transition-delay: 1s;/*过渡延迟，经过多少时间以后才开始过渡*/
transition-timing-function: linear;/*过渡运行曲线.匀速*/

关于transition-timing-function:

/*transition: 1s linear; 匀速*/
/*transition: 1s ease; 慢快慢（先加速，后减速）*/
/*transition: 1s ease-in; 匀加速*/
 transition: 1s ease-out; /*匀减速*/

2、局限性

transition的优点在于简单易用，但是它有几个很大的局限。

（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。

2、animation

CSS3的animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成：
1）通过类似Flash动画中的帧来声明一个动画；
2）在animation属性中调用关键帧声明的动画。

Note：animation属性到目前位置得到了大多数浏览器的支持，但是，需要添加浏览器前缀哦！需要添加浏览器前缀哦！需要添加浏览器前缀哦！

1、用法animation: move 4s 1s linear infinite alternate;//综合写法

分开分析

animation-name: move; /*动画名称自己喜欢就好*/
animation-duration: 4s;/*动画全过程用的时间*/
animation-delay: 1s;/*动画延迟，经过多少时间开始运动*/
animation-timing-function: linear;/*动画运动曲线*/
animation-iteration-count: infinite;/*播放次数，可以给次数，没有单位，infinite无限循环*/
animation-direction: alternate;/*是否反向播放动画normal正常，alternate反向播放动画*/

animation-play-state: running;//开始运动
animation-play-state: paused;//暂停动画

2、动画写法!!!!!要加浏览器前缀!!!!!要加浏览器前缀!!!!!要加浏览器前缀!!!!!要加浏览器前缀!!!!!要加浏览器前缀

 @-webkit-keyframes move {
            0%{left:0; top: 0;}/*动画开始时的初始状态，可以不写*/
            25%{left:400px; top: 0;}/*动画从0到25%的目的地*/
            50%{left:400px; top: 300px;}
            75%{left:0; top: 300px;}
            0%{left:0; top: 0;} /*可以不写，不写也有默认的，是回到起点*/
        }

/*动画的第二种定义方式*/
        @-webkit-keyframes play {
            from{ left:0; top: 0;}/*相当于0%*/
            to{ left: 400px; top: 0; }/*相当于100%*/
        }

3、放大倍数scale（应用在transition中）

@-webkit-keyframes move {
            25%{transform: scale(1.2);}//scale表示放大倍数默认是1.
            50%{transform: scale(1.5);}
            75%{transform: scale(1.2);}
        }