【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟等多个参数

2025-10-09 447

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： transition过渡属性早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。在CSS中创建简单的过渡效果可以从以下几个步骤来实现：在默认样式中声明元素的初始状态样式；声明过渡元素最终状态样式，比如悬浮状态；在默认样式中通过添加

transition过渡属性

早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。
但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，
让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发，
并平滑地以动画效果改变CSS的属性值。

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：

在默认样式中声明元素的初始状态样式；
声明过渡元素最终状态样式，比如悬浮状态；
在默认样式中通过添加过渡函数，添加一些不同的样式。

transition-property 模拟css属性

transition-property指定对THML元素的哪个css属性进行平滑渐变处理，该属性可以指定
例如background-color,width,height等各种标准的CSS属性。

特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。

用一个简单的例子来说明这个问题：
假设你的初始状态设置了样式“width”,“height”,“background”,当你在最终状态都改变了这三个属性，
那么all代表的就是“width”、“height”和“background”。
如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>07动画--过渡属性 transition-property档</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div></div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
   
    margin: 0;
    padding: 0;
}
div {
   
    width: 300px;
    height: 300px;
    margin: 100px auto;
    background-color: #900;
    /*transition:background-color 1s ease .2s;
    -webkit-transition: background-color .5s ease .1s;*/
    transition-property:background-color;
    transition:all 5s ease .2s;

    /*-webkit-transition: all .5s ease .1s;
    transition:all .5s ease .1s;*/
}
div:hover {
   
    /*width: 400px;
    height: 400px;*/
    background-color: #FF0;
}

/*在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同*/

请牢记，transition过渡属性一定是放在需要显示过渡效果的元素中

transition-duration 过渡所需时间指定

transition-duration 属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>08动画--过渡所需时间 transition-duration</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div></div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
   
    margin: 0;
    padding: 0;
}
div {
   
    width: 300px;
    height: 200px;
    margin: 100px auto;
    background-color: #900;
    transition-property: all;
    /*-moz-transition-property: border-radius;
    -webkit-transition-property: border-radius;*/
    transition-duration: 1.5s;
    transition-timing-function:linear;
    /*-moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;*/

}
div:hover {
   
    border-radius: 50%;
    background-color: #344FB3;
}

transition-timing-function 过渡函数

transition-timing-function 属性指的是过渡的“缓动函数”。

主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>09动画--过渡函数 transition-timing-function</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
   
    margin: 0;
    padding: 0;
}
div {
   
    width: 200px;
    height: 100px;
    margin: 10px auto;
    background: #900;
    transition-property: border-radius;
    -webkit-transition-property: -webkit-border-radius;
    -moz-transition-property: -moz-border-radius;
    transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -moz-transition-duration: .5s;
    transition-delay: .2s;/*transition-timing-function:ease;*/
    /*transition-timing-function:linear;*/
    /*transition-timing-function:ease-in;    */
    /*transition-timing-function:ease-out;*/    
    /*transition-timing-function:ease-in-out;    */
}
div:hover {
   
    border-radius: 100%;
}
.one {
   
    transition-timing-function: ease;
}
.two {
   
    transition-timing-function: linear;
}
.three {
   
    transition-timing-function: ease-in;
}
.four {
   
    transition-timing-function: ease-out;
}
.five {
   
    transition-timing-function: ease-in-out;
}

示例2

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
      #wrapper{
      
          width:1024px;
          margin:0 auto;
      }
      .progress-bar{
      
          height:40px;
          width:40px;
          background-color: #69c;
      }
      .progress-bar:hover{
      
          width:960px;
      }

      #bar1{
      
          -webkit-transition: width 5s linear;
      }
      #bar2{
      
          -webkit-transition: width 5s ease;
      }
      #bar3{
      
          -webkit-transition: width 5s ease-in;
      }
      #bar4{
      
          -webkit-transition: width 5s ease-out;
      }
      #bar5{
      
          -webkit-transition: width 5s ease-in-out;
      }
  </style>
</head>
<body>

  <div id="wrapper">
      <p>linear</p>
      <div class="progress-bar" id="bar1"></div>

      <p>ease</p>
      <div class="progress-bar" id="bar2"></div>

      <p>ease-in</p>
      <div class="progress-bar" id="bar3"></div>

      <p>ease-out</p>
      <div class="progress-bar" id="bar4"></div>

      <p>ease-in-out</p>
      <div class="progress-bar" id="bar5"></div>
  </div>
</body>
</html>

transition-delay 过渡时间延迟

transition-delay属性和transition-duration属性极其类似，不同的是 transition-duration 是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。

有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。
但需要值得注意的一点：

第一个时间的值为 transition-duration，第二个为transition-delay。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>10动画--过渡延迟时间 transition-delay</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
    <div class="wrapper">
        <div><span>请把鼠标放我这儿</span></div>
    </div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
   
    margin: 0;
    padding: 0;
}
.wrapper {
   
    width: 400px;
    height: 400px;
    margin: 100px auto;
    border:2px dotted #906;
}
.wrapper div{
   
    width:200px;
    height:200px;
    line-height:200px;
    text-align:center;
    font-size:20px;
    color:#fff;
    background-color:#90F;
/*    transition-property:all;
    transition-duration:3s;
    transition-timing-function:linear;
    transition-delay:1s;*/
    transition:all 3s ease-in;
        /*transition:all 1s ease-in .1s;*/
/*    -webkit-transition:all 1s ease-in .1s;
    -moz-transition:all 1s ease-in .1s;*/
}
.wrapper div:hover{
   
    width:300px;
    height:300px;
    background-color:#F39;
}

【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟等多个参数

transition过渡属性

transition-property 模拟css属性

transition-duration 过渡所需时间指定

transition-timing-function 过渡函数

transition-delay 过渡时间延迟

🤩CSS教学往期回顾

💕👉博客专栏

云原生

热门文章

最新文章

相关课程

相关电子书

【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数

transition过渡属性

transition-property 模拟css属性

transition-duration 过渡所需时间指定

transition-timing-function 过渡函数

transition-delay 过渡时间延迟

🤩CSS教学往期回顾

💕👉博客专栏

云原生

热门文章

最新文章

相关课程

相关电子书

【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟等多个参数