動畫--過渡屬性 transition-property

時間 2019-11-24

標籤動畫過渡屬性 transition property 简体版

原文原文鏈接

動畫--過渡屬性 transition-property

早期在Web中要實現動畫效果，都是依賴於JavaScript或Flash來完成。但在CSS3中新增長了一個新的模塊transition，它能夠經過一些簡單的CSS事件來觸發元素的外觀變化，讓效果顯得更加細膩。簡單點說，就是經過鼠標的單擊、得到焦點，被點擊或對元素任何改變中觸發，並平滑地以動畫效果改變CSS的屬性值。css

在CSS中建立簡單的過渡效果能夠從如下幾個步驟來實現：
第一，在默認樣式中聲明元素的初始狀態樣式；
第二，聲明過渡元素最終狀態樣式，好比懸浮狀態；
第三，在默認樣式中經過添加過渡函數，添加一些不一樣的樣式。

CSS3的過分transition屬性是一個複合屬性，主要包括如下幾個子屬性：html

transition-property:指定過渡或動態模擬的CSS屬性

transition-duration:指定完成過渡所需的時間

transition-timing-function:指定過渡函數

transition-delay:指定開始出現的延遲時間

先來看transition-property屬性web

transition-property用來指定過渡動畫的CSS屬性名稱，而這個過渡屬性只有具有一個中點值的屬性（須要產生動畫的屬性）才能具有過渡效果，其對應具備過渡的CSS屬性主要有：函數

HTML:動畫

<div></div>

CSS:spa

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
}
div:hover {
  background-color: orange;
}

演示結果:code

鼠標移入htm

鼠標移出blog

特別注意：當「transition-property」屬性設置爲all時，表示的是全部中點值的屬性。事件

用一個簡單的例子來講明這個問題：

假設你的初始狀態設置了樣式「width」,「height」,「background」,當你在終始狀態都改變了這三個屬性，那麼all表明的就是「width」、「height」和「background」。若是你的終始狀態只改變了「width」和「height」時，那麼all表明的就是「width」和「height」。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>變形與動畫</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div></div>

</body>
</html>

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: width;
  -webkit-transition-property:background;
  transition-property:background;
  transition-property: width;
  -webkit-transition-duration:1s;
  transition-duration:1s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: 1s;
      transition-delay:1s;
}
div:hover {
  width: 400px;
  background:yellow;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。