过渡和动画

过渡：transition

    transtion：transition-property|transition-duration|transition-timing-function|transition-delay

    transition-property：检索或设置对象中的参与过渡的属性，all | property | none；

        all：所有可以进行过渡的css属性，none：不指定过渡的css属性，property：指定要进行过渡的css属性；

        例如：-webkit-transition-property：border-color，background-color；

                  -webkit-transition-property：all；

    transition-duration：持续时间，time；注意：时间以秒s为单位；

        例如：-webkit-transition-duration：0.3s，0.7s；

    transition-timing-function：过渡的动画类型，linear | ease（默认值）| ease-in | ease-out | ease-in-out | cubic-bezier（number，number，number，number）注意：number取值是[0，1]；

      linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ；

                ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) ；

                ease-in： 慢慢进入（由慢到快） 。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ；

                ease-out：慢慢退出（由快到慢） 。等同于贝塞尔曲线(0, 0, 0.58, 1.0) ；

                ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) ；

                cubic-bezier(<number>, <number>, <number>, <number>)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内；

        例如：-webkit-transition-timing-function：ease-in；

    transition-delay：延迟时间，time；同持续时间；

        例如：-webkit-transition-delay：.9s； 表示过渡在0.9s之后发生；

复合写法例子：-webkit-transition：border-color .5s ease-in 2s，background-color .9s ease-out 3s；

拆分写法例子：transition-property：border-color，background-color；

                        transition-duration：.5s；

                        transition-timing-function：ease-in；

                        transition-delay：.1s；

动画：

动画方法（关键帧语法）：@keyframes

                 @keyframes IDENT {

                             from { Properties:Properties value; }

                            Percentage { Properties:Properties value; }

                            to { Properties:Properties value; }

                     }

        首先，如果想要用动画必须先创建一个动画的具体方法，然后用animation去调用；

        例如：@-webkit-keyframes 'wobble' {

                            0% { margin-left: 100px; background: green; }

                            40% { margin-left: 150px; background: orange; }

                            60% { margin-left: 75px; background: blue; }

                            100% { margin-left: 100px; background: red; }

                    }

观看视角：perspective：number；

        例如：-webkit-perspective:0;

动画：animation设置对象所应用的动画效果；

        animation：animation-name | animation-duration | animation-timing-function | animation- delay |animationiteration-count | animation-direction

        animation-name：检索或设置对象所应用的动画名称；自己定义一个或多个，

        animation-duration：检索或设置动画的持续时间，默认值0；

        animation-timing-function：检索或设置动画的过渡类型即频率；同过渡的频率；

        animation-delay：延迟时间，意思就是多久后执行这个动画；

        animation-iteration-count：循环次数，默认值是1，infinite（无限次）|number；

        animation-direction：检索或设置对象动画在循环中是否反向运动，normal | alternative（第一次运动结束后然后反向运动）；

例如：

    .outer{

        width:200px; height:200px;

        position:relative;margin:100px auto;

       -webkit-transform-style:preserve-3d;

        -webkit-animation:roll 3s linear 1s infinite alternate;

    }

/* animation */

    @-webkit-keyframes roll{

        from {-webkit-transform:rotatey(0deg);}

        to {-webkit-transform:rotatey(360deg);}

    }

注意：在补三维立体时，要加入-webkit-transform-style：preserve-3d；