html5 学习--平滑过渡

来源：互联网发布：戏子家事天下知编辑：程序博客网时间：2024/05/19 12:15

语法：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>

0 0