CSS3之transition和animation動畫
在寫完css3之變形後,感覺一下子對transform的使用清晰了很多,所以決定再把css3中其他重要新功能也梳理一下。本文將梳理transition和animation動畫功能
本文示例中使用到的html結構都是統一的,程式碼如下:
<style>
#wrapper{
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
margin:100px auto ;
}
#rotate{
width: 200px;
height: 200px;
background: orange;
line-height: 200px;
text-align: center;
}
</style>
<div id="wrapper">
<div id="rotate">
動畫特效
</div>
</div>
CSS3中可以實現動畫效果的屬性有Transition和Animation,這兩種功能都可以通過改變CSS中的屬性值來產生動畫效果。
transition(過渡)
作用:
通過滑鼠單擊、獲得焦點等事件來平滑地以動畫效果改變CSS屬性值語法:transition: property duration timing-function delay
其中:
transition-duration: 表示在多長時間內完成屬性值的平滑過渡
transition-timing-function: 表示通過什麼方法來進行平滑過渡(具體值後面詳細介紹)
transition-delay: 指定延遲多長時間後開始執行動畫
transition-property: 表示對哪個CSS屬性進行平滑動畫過渡(可設定為all,則所有屬性值變化時均產生動畫效果)
擁有過渡效果的CSS屬性如下圖(即可以作為transition-property的值的屬性):
在CSS中建立簡單的transition過渡效果可從以下三步來實現:
第一,在預設樣式中宣告元素的初始狀態樣式;
第二,宣告過渡元素最終狀態樣式,比如懸浮狀態;
第三,在預設樣式中通過新增過渡函式,新增一些不同的樣式。
CSS程式碼如下:
#rotate{
transition:transform 3s ease-in 0s;
}
#rotate:hover{
-webkit-transform: rotate(45deg);
}
頁面效果如下:
animation(動畫)
語法:animations: name duration timing-function delay iteration-count;
其中:
animation-name: 用來呼叫在 @keyframes中已經定義好的動畫,其名稱必須與“@keyframes”定義的動畫名稱完全一致(區分大小寫);none為其預設值,當值為 none 時,將沒有任何動畫效果,這可以用於覆蓋任何動畫。
animation-duration: 用來指定元素播放動畫所持續的時間,也就是完成從0%到100%一次動畫所需時間
animation-timing-function: 用來設定動畫播放方式(具體值下面詳細介紹)animation-delay: 用於定義在瀏覽器開始執行動畫之前等待的時間。
animation-iteration-count: 用來定義動畫的播放次數,可設定為具體數值,或者設定為infinite進行無限迴圈,預設為1
animation-direction:用來設定動畫播放方向,其主要有兩個值:normal(預設值,每次迴圈總是向前移動)、alternate(動畫播放在第偶數次向前播放,第奇數次向反方向播放)
animation-play-state:用來控制元素動畫的播放狀態,其主要有兩個值:running和paused。其中running是其預設值,主要作用就是類似於音樂播放器一樣,可以通過paused將正在播放的動畫停下來,也可以通過running將暫停的動畫重新播放,這裡的重新播放不一定是從元素動畫的開始播放,而是從暫停的那個位置開始播放。另外如果暫停了動畫的播放,元素的樣式將回到最原始設定狀態
animation-fill-mode:定義在動畫開始之前和結束之後發生的操作。主要具有四個屬性值:none、forwards、backwords和both。
Keyframes被稱為關鍵幀。在CSS3中其主要以“@keyframes”開頭,後面緊跟著是動畫名稱加上一對花括號“{…}”,括號中就是一些不同時間段樣式規則。
在CSS中建立簡單的animation動畫效果可以從以下幾個步驟來實現:
第一,在預設樣式中宣告元素的初始狀態樣式;
第二,在需要執行動畫的元素樣式中新增animation屬性;
第三,在關鍵幀中宣告不同時間段的樣式規則
在寫完css3之變形後,感覺一下子對transform的使用清晰了很多,所以決定再把css3中其他重要新功能也梳理一下。本文將梳理transition和animation動畫功能
本文示例中使用到的html結構都是統一的,程式碼如下:
<style>
#wrapper{
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
margin:100px auto;
}
#rotate{
width: 200px;
height: 200px;
background: orange;
line-height: 200px;
text-align: center;
}
</style>
<div id="wrapper">
<div id="rotate">
動畫特效
</div>
</div>
CSS3中可以實現動畫效果的屬性有Transition和Animation,這兩種功能都可以通過改變CSS中的屬性值來產生動畫效果。
transition(過渡)
作用:
通過滑鼠單擊、獲得焦點等事件來平滑地以動畫效果改變CSS屬性值語法:transition: property duration timing-function delay
其中:
transition-duration: 表示在多長時間內完成屬性值的平滑過渡
transition-timing-function: 表示通過什麼方法來進行平滑過渡(具體值後面詳細介紹)
transition-delay: 指定延遲多長時間後開始執行動畫
transition-property: 表示對哪個CSS屬性進行平滑動畫過渡(可設定為all,則所有屬性值變化時均產生動畫效果)
擁有過渡效果的CSS屬性如下圖(即可以作為transition-property的值的屬性):
在CSS中建立簡單的transition過渡效果可從以下三步來實現:
第一,在預設樣式中宣告元素的初始狀態樣式;
第二,宣告過渡元素最終狀態樣式,比如懸浮狀態;
第三,在預設樣式中通過新增過渡函式,新增一些不同的樣式。
CSS程式碼如下:
#rotate{
animation: wobble 5s ease .1s;
}
@keyframes wobble {
0% {
margin-left: 0px;
background:green;
}
40% {
margin-left:150px;
background:orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}
頁面效果如下:
timing-function
transition和animation中都一個timing-function屬性,該屬性值指的是過渡的“緩動函式”。主要用來指定瀏覽器的過渡速度,以及過渡期間的操作進展情況,
其主要取值是以下幾種函式名: