CSS Transition 过渡

前言

• CSS3 中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用 Flash 动画或 JavaScript。

属性	描述	CSS	备注	🔗
transition	简写属性，用于在一个属性中设置四个过渡属性	3		🔗
transition-property	规定应用过渡的 CSS 属性的名称	3		🔗
transition-duration	定义过渡效果花费的时间。默认是 0	3		🔗
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”	3		🔗
transition-delay	规定过渡效果何时开始。默认是 0	3		🔗

• 用鼠标移过下面的元素：

  
  

  
  CSS3
  
  过渡
  

  
  

1、过渡

• CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

• 要实现这一点，必须规定两项内容：

  • 指定要添加效果的 CSS 属性。
  • 指定效果的持续时间。

1.1 transition-property

• 语法

  transition-property: none | all | property;

• 属性值

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

1.2 transition-duration

• 语法

  transition-duration: time;

• 属性值

值	描述
time	规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果

1.3 transition-timing-function

• 语法

  transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n);

• 属性值

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0, 0, 1, 1)）
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25, 0.1, 0.25, 1)）
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42, 0, 1, 1)）
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0, 0, 0.58, 1)）
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42, 0, 0.58, 1)）
cubic-bezier(n, n, n, n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

1.4 transition-delay

• 语法

  transition-delay: time;

• 属性值

值	描述
time	指定秒或毫秒数之前要等待切换效果开始

1.5 实例

• 应用于宽度属性的过渡效果，时长为 2 秒。如果未指定的期限，transition 将没有任何效果，因为默认值是 0。

• 实例

  <style>
      div {
          width: 100px;
          height: 100px;
          background: red;
          
          transition: width 2s;
          -webkit-transition: width 2s; /* Safari */
      }
      div:hover {
          width: 300px;
      }
  </style>

  <div></div>

• 效果

  
  

  
  

• 鼠标放在元素上查看过渡效果。

2、多项改变

• 要添加多个样式的变换效果，添加的属性由逗号分隔。

• 实例

  <style>
      div {
          width: 100px;
          height: 100px;
          background: red;
          
          transition: width 2s, height 2s, transform 2s;
          -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
      }
      div:hover {
          width: 200px;
          height: 200px;
          transform: rotate(180deg);
          -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
      }
  </style>

  <div></div>

• 效果

  
  

  
  

• 鼠标放在元素上查看过渡效果。

3、简写

属性	描述	CSS	备注	🔗
transition	简写属性，用于在一个属性中设置四个过渡属性	3		🔗

• transition 属性设置元素当过渡效果，四个简写属性为：

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

• 注意：始终指定 transition-duration 属性，否则持续时间为 0，transition 不会有任何效果。

• 语法

  transition: property duration timing-function delay;

• 属性值

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

• 简写实例

  <style>
      div {
          width: 100px;
          height: 100px;
          background: red;
  
          transition: width 1s linear 2s; /* Safari */
          -webkit-transition: width 1s linear 2s;
      }
      div:hover {
          width: 200px;
      }
  </style>

  <div></div>

• 全写实例

  <style>
      div {
          width: 100px;
          height: 100px;
          background: red;
  
          transition-property: width;
          transition-duration: 1s;
          transition-timing-function: linear;
          transition-delay: 2s; /* Safari */
          -webkit-transition-property: width;
          -webkit-transition-duration: 1s;
          -webkit-transition-timing-function: linear;
          -webkit-transition-delay: 2s;
      }
      div:hover {
          width: 200px;
      }
  </style>

• 效果

  
  

  
  

• 鼠标放在元素上查看过渡效果，注意过渡效果需要等待两秒后才开始。

4、浏览器支持

属性
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-delay	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-duration	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-timing-function	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

• 表格中的数字表示支持该属性的第一个浏览器版本号。
• 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。