CSS动画:

                                               CSS动画

    一、transition过渡：

                 四要素:

                   1、过渡属性;多个值之间用逗号隔开;可以是具体的属性,如color、background,也可以是transform.

                 IE  Firefox                                  Chrome Safari                                        Opera

                transition-property:         -webkit-transition-property:                         -o-transition-property:

               2、过渡时间:可以是具体的数值,以秒或者毫秒为单位.

                transition-duration:         -webkit-transition-duration:                          -o-transition-duration:

               3、过渡函数:

               transition-timing-function:       -webkit-transition-timing-function:              -o-transition-timing-function:

               具体取值:

                ease:默认值,慢速开始,中间加速,最后减速.

                ease-in:慢速开始,逐渐加速;

                ease-out:以慢速结束,减速效果;

                ease-in-out:慢速开始，慢速结束;

                linear:匀速过渡;

                4、过渡延迟:

                 transition-delay:                   -webkit-transition-delay:                           -o-transition-delay:

                 注:现在更新的浏览器都是兼容的,不用添加前缀.

                 5、组合在一起:

                     transition:property duration timing-function [delay];

                     可同时过渡多个属性,用逗号隔开,如:

                      transition:property1 dyration1 timing-function1 delay1,property2 duration2 timimng-function2 delay2.....;

        二、动画效果:两大步骤:

                1、定义关键帧:

                    @keyframes 动画名{

                                from{

                                   /*定义初始状态的样式;0%*/

                                }

                                percent{

                                     /*可以是20%等，可以出现多个*/

                                }...

                                to{

                                      /*定义最后的样式*/

                                 }

                     };

                     注意:如果不执行,则需添加浏览器前缀,-webkit-或者-o-;

                  2、调用关键帧:

                    animation:动画名 执行时间 执行函数;

                    具体属性:

                     1、animation-name:设置动画的名称;

                     2、animation-duration:设置动画执行的时间;

                     3、animation-timing-function:设置动画执行的函数;

                     4、animation-delay:设置动画的延迟时间;

                     5、animation-iteration-count:设置动画执行的次数;

                            取值可以是具体数字,也可以是infinite(无限次)

                     6、animation-direction:设置动画的播放方向:

                           取值可以是normal、alternate(循环播放,奇数正向播放,偶数反向播放);

                     7、animation-fill-mode:设置动画播放后的效果

                            取值:

                              none:初始样式,不改变默认行为.(默认行为)

                              forwards:动画播放结束后保持最后一个状态;

                              backwards:结束后保持第一个状态;

                              both:

                      8、animation-play-state:控制动画的播放与暂停;

                           取值为running、paused