动画的标签

   @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，
        就能创建由当前样式逐渐改为新样式的动画效果。
              属性｛1@keyframes
                   2animation ｝
                如：@keyframes myfirst
                {
                from {background: red;}
                to {background: yellow;}
                }
                
                @-moz-keyframes myfirst /* Firefox */
                {
                from {background: red;}
                to {background: yellow;}
                }
                
                @-webkit-keyframes myfirst /* Safari 和 Chrome */
                {
                from {background: red;}
                to {background: yellow;}
                }
                
                @-o-keyframes myfirst /* Opera */
                {
                from {background: red;}
                to {background: yellow;}
                }
       ---------------------------------------------------
        在 @keyframes 中创建动画时，把它捆绑到规定
                    1.动画的名称 
                    2.规定动画的时长 
        否则不会产生动画效果。
        如：div
                {
                animation: myfirst 5s;
                -moz-animation: myfirst 5s;    /* Firefox */
                -webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
                -o-animation: myfirst 5s;    /* Opera */
                }
        用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于
         0% 和 100%。
        ---------
        当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变
        如：@keyframes myfirst
            {
            0%   {background: red;}
            25%  {background: yellow;}
            50%  {background: blue;}
            100% {background: green;}
            }
            
            @-moz-keyframes myfirst /* Firefox */
            {
            0%   {background: red;}
            25%  {background: yellow;}
            50%  {background: blue;}
            100% {background: green;}
            }
            
            @-webkit-keyframes myfirst /* Safari 和 Chrome */
            {
            0%   {background: red;}
            25%  {background: yellow;}
            50%  {background: blue;}
            100% {background: green;}
            }
            
            @-o-keyframes myfirst /* Opera */
            {
            0%   {background: red;}
            25%  {background: yellow;}
            50%  {background: blue;}
            100% {background: green;}
            }
        -------------------------------
        属性                  描述 
        @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"。 
        animation-fill-mode   规定对象动画时间之外的状态。
        ----------------------------------------------
###2D转换
        ：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

        2D2D 转换方法：
        translate() 
        rotate() 
        scale() 
        skew() 
        matrix(）

        如：
        div
    {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);        /* IE 9 */
    -webkit-transform: rotate(30deg);    /* Safari and Chrome */
    -o-transform: rotate(30deg);        /* Opera */
    -moz-transform: rotate(30deg);        /* Firefox */
    }

    通过 translate() 方法，元素从其当前位置移动，根据给定的
     left（x 坐标） 和 top（y 坐标） 位置参数。
    如：
    div
    {
    transform: translate(50px,100px);
    -ms-transform: translate(50px,100px);        /* IE 9 */
    -webkit-transform: translate(50px,100px);    /* Safari and Chrome */
    -o-transform: translate(50px,100px);        /* Opera */
    -moz-transform: translate(50px,100px);        /* Firefox */
    }



    
    通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
    如
    div
        {
        transform: scale(2,4);
        -ms-transform: scale(2,4);    /* IE 9 */
        -webkit-transform: scale(2,4);    /* Safari 和 Chrome */
        -o-transform: scale(2,4);    /* Opera */
        -moz-transform: scale(2,4);    /* Firefox */
        }
    
    通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
    如：
    div
    {
    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg);    /* IE 9 */
    -webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
    -o-transform: skew(30deg,20deg);    /* Opera */
    -moz-transform: skew(30deg,20deg);    /* Firefox */
    }

    matrix() 方法
    matrix() 方法把所有 2D 转换方法组合在一起。
    matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。


    如：使用 matrix 方法将 div 元素旋转 30 度：
    div
    {
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        
    -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        
    }

###3D转换

    3D 转换方法：

    rotateX() 
    rotateY() 

    通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
    如：
    div
    {
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg);    /* Safari 和 Chrome */
    -moz-transform: rotateX(120deg);    /* Firefox */
    }



    通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
    如：
    div
    {
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */
    -moz-transform: rotateY(130deg);    /* Firefox */
    }

    属性                描述 
    transform        向元素应用 2D 或 3D 转换。 
    transform-origin 允许你改变被转换元素的位置。 
    transform-style  规定被嵌套元素如何在 3D 空间中显示。 
    perspective       规定 3D 元素的透视效果。 
    perspective-origin 规定 3D 元素的底部位置。  
    backface-visibility 定义元素在不面对屏幕时是否可见。