CSS3动画

对css3动画做了个简单的总结：

1、CSS3动画是什么？

动画是使元素从一种样式逐渐变化为另一种样式的一种效果。我们可以改变任意多样的次数。可以用百分比（ 0% 和 100%，百分比代表的是时间）或者是用关键词 "from" 和 "to"来规定变化发生的时间。0% 是动画的开始，100% 是动画的完成。同时为了得到最佳的浏览器支持，我们始终定义 0% 和 100% 选择器。

2、CSS3 @keyframes 的规则

如果我们想要创建一个css3动画，我们需要先创建一个@keyframes动画，所以就必须得了解@keyframes的一些规则。

• transition 过渡属性：它的特点是需要事件来触发。
• anmition  动画属性：它的特点是不需要事件进行触发，调用关键帧即可。

animation:它是个复合属性

•      animation-name------------------------ --关键帧的名称
•      animation-duration------------------------动画的持续的时间
•      animation-timing-function --------------动画运用的类型

                 属性：

                          linear------匀速运动 

                          ease-------默认

                          ease-in-----以低速开始

                          ease-out----以低速结束

                          ease-in-out---以低速开始和结束

                          cubic-bezier(n,n,n,n)---数值n只能是[0,1]

                          step-start-------马上跳到动画每一结束桢的状态

•      animation-delay---------------------------动画的延迟
•      animation-iteration-count---------------动画运动的次数（默认情况下运动1次） infinite(无限循环)
•      animation-direction-----------------------运动的方向

                 属性值：

                          - reverse：反方向运行 （ 让关键帧从后往前执行 ）
                          - alternate：动画先正常运行再反方向运行，并持续交替运行
                          - alternate-reverse：动画先反运行再正方向运行，并持续交替运行

•      animation-play-state 

                  属性值：
                              paused暂停
                              running运动

•      常用的写法：animation:关键帧的名称  动画运动的时间  linear(匀速)  动画延迟的时间
• 注意: 必须定义动画的名称 和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。
• 制作关键帧的两种方法：

                     方法一：

                                  @keyframes 关键帧名称{

                                 from{  }

                                 to{ }

                                 }

                     方法二：

                                 @keyframes 关键帧名称{

                                 0%{  开始状态 }

                                 10%{  }

                                 ......

                                 100%{ 结束状态 }

                                 }

3、案例

代码：

        p{
            width: 50px;
            height: 50px;
            background-color: darkgoldenrod; 
            /* 
                调用关键帧 
                go--关键帧名称
                3s--运动时间
                linear--匀速运动
                infinite--无限制，一直的运动  
            */
             animation: go 3s linear infinite;
        }

        /* 创建关键帧 */
        @keyframes go{
            0%{
                /* 起始位置 */
                transform: translateX(0px);
            }
            25%{
                transform: translateX(350px) translateY(0px);
            }
            50%{
                /* 沿X方向水平位移350px,沿Y方向水平位移350px */
                transform: translateX(350px) translateY(350px);
            }
            75%{
                transform: translateX(0px) translateY(350px);
            }
            100%{
                /* 终止位置 */
                transform:  translateX(0px);
            }
        }

 结果：