css3 transition简单使用

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

四个参数说明如下：

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>

duration：即过渡的持续时间，默认为0.（值可为 1s/2s/3s/.....）

timing-function：ease(逐渐变慢)/linear(匀速)/ease-in(加速)/ease-out(减速)/ease-in-out(加速然后减速)/cubic-bezier(自定义时间曲线)

/* (-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>

delay：延迟几秒后，开始过渡(默认 0,即立即执行过渡)

css3 transition简单使用

相关推荐