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

 

posted @ 2017-06-27 13:59  星河mio  阅读(156)  评论(0)  编辑  收藏  举报