CSS 過渡

文章目錄

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

屬性	說明	版本
transition	複合屬性，可以一次聲明所有過渡屬性。	CSS3
transition-property	設定用來進行過渡的 CSS 屬性。	CSS3
transition-duration	設定過渡進行的時間長度。	CSS3
transition-timing-function	設定過渡進行的時序函數。	CSS3
transition-delay	指定過渡開始的時間。	CSS3

浏覽器支援：

transition

transition 屬性設定元素過渡效果，四個簡寫屬性依次是：

transition-property, transition-duration, transition-timing-function, transition-delay

。

文法：

transition: property duration timing-function delay;

/*width屬性, 過渡時間5s, 勻速, 延遲2s執行*/
transition: width 5s linear 2s;

/*width屬性, 過渡時間5s, 其他預設值*/
transition: width 5s;

/*所有屬性過渡時間5s, 其他預設值*/
transition: 5s;
           

相容低版本浏覽器(添加浏覽器核心字首)：

div{
  -o-transition: all 2s;
  -moz-transition: all 2s;
  -webkit-transition: all 2s;
  transition: all 2s;   /*無字首的始終在後面寫*/
}
           

transition-property

transition-property 屬性指定獲得過渡效果的屬性。

值	描述
none	沒有屬性會獲得過渡效果。
all	所有屬性都将獲得過渡效果。
property	CSS 屬性名稱清單，清單以逗号分隔。

transition-property: width;
transition-property: width,height;
transition-property: all;
           

相容低版本浏覽器(添加浏覽器核心字首)：

div{
  -o-transition-property: width;
  -moz-transition-property: width;
  -webkit-transition-property: width;
  transition-property: width;   /*無字首的始終在後面寫*/
}
           

例：當滑鼠懸浮div時，寬/高在2秒内逐漸增大到300px/200px

div{
  width:100px;
  height:100px;
  background:red;
  transition-property: width,height;
  transition-duration: 2s;
  -webkit-transition-property: width,height; /* Safari */
  -webkit-transition-duration: 2s;   /* Safari */
}
div:hover{
  width:300px;
  height:200px;
}
           

transition-duration

transition-duration 屬性規定完成過渡效果需要花費的時間（以秒計）。

值	描述
time	數值(機關s)，預設值是 0，意味着不會有效果。

transition-duration: 3s;   /*過渡時間3秒*/
transition-duration: 0.3s; /*過渡時間0.3秒*/

/*相容低版本浏覽器 Safari*/
-webkit-transition-duration: 5s;
-moz-transition-duration: 5s;
-o-transition-duration: 5s;
           

相容低版本浏覽器(添加浏覽器核心字首)：

div{
  -o-transition-duration: 5s;
  -moz-transition-duration: 5s;
  -webkit-transition-duration: 5s;
  transition-duration: 5s;   /*無字首的始終在後面寫*/
}
           

transition-timing-function

transition-timing-function 屬性指定切換效果的速度。

值	描述
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()	在 cubic-bezier 函數中定義自己的值。參數是 0 至 1 之間的數值。

transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.42,0,1,1);
           

相容低版本浏覽器(添加浏覽器核心字首)：

div{
  -o-transition-timing-function: linear;
  -moz-transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear; /*無字首的始終在後面寫*/
}
           

transition-delay

transition-delay 屬性指定何時将開始切換效果。機關秒(s)。

值	描述
time	等待開始的時間。數值，機關s(秒)。

transition-delay: 2s;   /*延遲2秒*/
transition-delay: 0.2s; /*延遲200毫秒*/
           

相容低版本浏覽器(添加浏覽器核心字首)：

div{
  -o-transition-delay: 2s;
  -moz-transition-delay: 2s;
  -webkit-transition-delay: 2s;
  transition-delay: 2s; /*無字首的始終在後面寫*/
}