动画属性中多个值的运用

CSS3里头的动画属性可以对应多个值，也就是说可以对进行动画的不同的属性来设置不一样的值。解释起来有点难，这里通过一个实例来进行讲解。

CSS


                .demo{
                position:relative;
                height:300px;
                margin:10px auto;
                background:#99ccff;
                }
                .demo .inner{
                position:absolute;
                width:100px;
                height:100px;
                background:#003366;
                }
                
                .demo .one{
                left:0;
                top:0;
                -webkit-transition-property:all
                -webkit-transition-duration:2s;
                -webkit-transition-delay:2s;
                -webkit-transition-timing-function:ease;
                }
                
                .demo .two{
                left:110px;
                top:0;
                -webkit-transition-property:left,top,background;
                -webkit-transition-duration:1s,2s,2s;
                -webkit-transition-delay:0,0,2s;
                -webkit-transition-timing-function:ease,ease-in,linear;
                }
                
                .demo:hover .one{
                left:200px;
                top:200px;
                background:red;
                }
                
                .demo:hover .two{
                left:310px;
                top:200px;
                background:red;
                }

HTML


                <div class="demo">
                <div class="inner one">1</div>
                </div>
                <div class="demo">
                <div class="inner two">2</div>
                </div>

可以看出第一个元素所有的属性都是在同样的时间内完成了动画，而第二个元素的left,top,background是在不同的时间内完成动画，这就是对变换时间设置了多个值的效果，每个进行动画的属性对应了相应的变换时间。