CSS3学习手记（10）过渡

CSS3过渡

允许css的属性值在一定的时间内平滑地过渡
在鼠标单击、获取焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值

transition

transition-property属性检索或设置对象中的参与过渡的属性

语法

transition-property:none|all|property

参数说明

none 没有属性改变
all 默认值
property 元素属性名

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
      body{background: #abcdef}
      div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background}
      div:hover{cursor: pointer;background: red;transition-property:background }
        </style>    
    </head>
    <body>
    <div></div>
    </body>
</html>

鼠标经过方块变红，离开后恢复正常

transition-duration属性检索设置对象过渡的持续时间

语法

transition-duration:time;

参数说明

规定完成过渡效果需要花费的时间（以秒或毫秒计）
默认值是0

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
      body{background: #abcdef}
      div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background;transition-duration: 3s}
      div:hover{cursor: pointer;background: red;transition-property:background;transition-duration: 3s }
        </style>    
    </head>
    <body>
    <div></div>
    </body>
</html>

transition-timing-function 检索或设置对象中过渡的动画类型

linear 线性过渡
ease 平滑过渡
ease-in 由慢到快
ease-out 由快到慢
ease-in-out 由慢到快在到慢
step-start
step-end

transition-delay属性检索或设置对象延迟过渡的时间

语法 transition-delay:time

参数说明

指定秒或毫秒之前要等待切换效果开始
默认值 0

CSS3学习手记（10） 过渡

CSS3过渡

transition

transition-timing-function 检索或设置对象中过渡的动画类型

transition-delay属性检索或设置对象延迟过渡的时间

CSS3学习手记（10）过渡