html5 學習--平滑過渡

xiaopengyaonixi發表於2016-10-08
HTML

語法：transition:[<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>[,<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>]]*

用法：transition: <過渡的屬性> <過渡的時間> <過渡的型別(ease ease-in ...)> <延遲時間>,...(如果有更多用逗號隔開)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color:orange;
            width:400px;
            height:200px;
        }

        div:hover{
            background-color:blue;
            /*定義動畫過渡的屬性*/
            -webkit-transition-property: background-color;
            -moz-transition-property: background-color;
            -ms-transition-property: background-color;
            -o-transition-property: background-color;
            transition-property: background-color;
            /*定義動畫過渡的時間*/
            -webkit-transition-duration: 2s;
            -moz-transition-duration: 2s;
            -ms-transition-duration: 2s;
            -o-transition-duration: 2s;
            transition-duration: 2s;
            /*定義動畫延遲觸發*/
            -webkit-transition-delay: 1s;
            -moz-transition-delay: 1s;
            -ms-transition-delay: 1s;
            -o-transition-delay: 1s;
            transition-delay: 1s;
            /*定義動畫的過渡效果:
            ease:緩解效果，linear：線性效果；
            ease-in：漸顯效果；ease-out:漸隱效果;
            ease-in-out:漸顯漸隱效果;cubic-bezier:特殊的立方貝塞爾曲線效果*/
            -webkit-transition-timing-function: ease-in-out;
            -moz-transition-timing-function: ease-in-out;
            -ms-transition-timing-function: ease-in-out;
            -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>


相關文章