#yyds干活盘点# 9 Css3 过渡-CFANZ编程社区

#yyds干活盘点# 9 Css3 过渡

一、Css3过渡

1.过渡

CSS3过渡是元素从一种样式逐渐改变为另一种样式的效果
语法：transition:property duration timing-functiondelay;

2.过渡属性

值	描述
transition-property	必需。指定CSS属性的name，transition效果
transition-duration	必需。transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

transition-timing-function

值	说明
linear	规定以相同速度开始至结束的过渡效果
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in	规定以慢速开始的过度效果
ease-out	规定以慢速结束的过度效果
ease-in-out	规定以慢速开始和结束的过渡效果

transition-property

值	描述
none	没有属性会获得过渡效果
all	所有属性都将活得过渡效果
property	定义应用过渡效果的CSS属性名称列表，列表以逗号分隔

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transition</title>
<style>
    #box{
      width: 150px;
      height: 150px;
      background: #99ffff;
      /* ease·-in:慢速开始 */
      /* transition:background 3s ease-in;*/    
      /* transition:width 5s ease-in; */
      /* linear:匀速开始至结束 */
      /*transition:width 5s linear;*/
      /* ease-in:慢速结束 */
      /* transition:width 5s ease-out,
          background 5s ease-out; */
      transition:all 3s;
    }
    #box:hover{
      background: #99ccff;
      width: 300px;
      height: 300px;
    }
</style>
</head>
<body>
  <div id="box"></div>
</body>
</html>

0 条评论