css3 transition简单使用

沈宫新 2013-03-08

selector {
    transition : [transition property] [duration] [timing-function] [delay]
}

四个参数说明如下:

  1. transition property:指 将要对selector 的哪些属性值(多个用逗号隔开)的改变进行过渡处理,默认为all,即只要selector 的(任何一个)css属性发生变化(比如hover或click导致的background-color变化),则对此变化进行过渡处理(比如background-color 缓变 变色).(none:不对任何属性的变化进行过渡处理)
    /* 对div 的 color 属性过渡持续时间为 1s,background-color 属性过渡持续时间为 10s (-moz前缀:注意在firefox下测试) */
    <!DOCTYPE html>
    <html>
    <head>
        <style>
            body{
                background : #ddd;
            }
            div{
                background-color : #000;
                color : #fff;
                width : 400px;
                height : 70px;
                line-height : 70px;
                font-weight : bold;
                text-align : center;
                margin : 50px auto;
                /* transition */
                -moz-transition:color 1s;
                -moz-transition:background 10s;
            }
            div:hover{
                color : #000;
                background-color : #fff;
            }
        </style>
    </head>
    <body>
        <div>transition</div>
    </body>
    </html>
     
  2. duration:即 过渡的持续时间,默认为0.(值可为 1s/2s/3s/.....)
  3. timing-function:ease(逐渐变慢)/linear(匀速)/ease-in(加速)/ease-out(减速)/ease-in-out(加速然后减速)/cubic-bezier(自定义时间曲线)

    css3 transition简单使用
     

    /* (-moz前缀:注意在firefox下测试) */
    <!DOCTYPE html>
    <html>
    <head>
        <style>
            body{
                background : #ddd;
            }
            div{
                background-color : #000;
                color : #fff;
                width : 200px;
                height : 70px;
                line-height : 70px;
                font-weight : bold;
                text-align : center;
                position : absolute;
                top : 0;left : 0;
            }
            #ease {
                -moz-transition:all 4s ease;
            }
            #linear {
                -moz-transition:all 4s linear;
            }
            #ease-in {
                -moz-transition:all 4s ease-in;
            }
            #ease-out {
                -moz-transition:all 4s ease-out;
            }
            #ease-in-out {
                -moz-transition:all 4s ease-in-out;
            }
            
            div.click{
                top : 0;
                left : 0;
            }
            div.clicked{
                top : 500px;
                left : 500px;
            }
        </style>
    </head>
    <body>
        <div id="ease-in-out">ease-in-out</div>
        <div id="ease-out">ease-out</div>
        <div id="ease-in">ease-in</div>
        <div id="linear">linear</div>
        <div id="ease">ease</div>
    </body>
    <script>
        var ids = ['ease','linear','ease-in','ease-out','ease-in-out'];
        for(var idx in ids){
            document.getElementById(ids[idx]).onclick = function(e){
                this.className = (this.className == 'clicked' ? 'click' : 'clicked');
            }
        }
    </script>
    </html>
     
  4. delay:延迟 几秒 后,开始过渡(默认 0,即立即执行过渡)

相关推荐