animation初體驗,
其實寫了這麼多項目,自己還沒真正的接觸到css3
中的動畫,剛好藉著今天有時間就簡單的瞭解一下這個animation
屬性,也為以後寫動畫做好準備。
要想瞭解animation
就得Crowdsourced Security Testing道@keyframes
。
@keyframes
規則是建立動畫。 @keyframes
規則內指定一個css
樣式和動畫將逐步從目前的樣式更改為新的樣式。
前提
學習animation
的前提是知道他的一些屬性以及屬性所代表的含義:
屬性 |
描述 |
CSS |
@keyframes |
規定動畫。 |
3 |
animation |
所有動畫屬性的簡寫屬性,除了 animation-play-state 屬性。 |
3 |
animation-name |
規定 @keyframes 動畫的名稱。 |
3 |
animation-duration |
規定動畫完成一個周期所花費的秒或毫秒。預設是 0。 |
3 |
animation-timing-function |
規定動畫的速度曲線。預設是 “ease”。 |
3 |
animation-delay |
規定動畫何時開始。預設是 0。 |
3 |
animation-iteration-count |
規定動畫被播放的次數。預設是 1。 |
3 |
animation-direction |
規定動畫是否在下一周期逆向地播放。預設是 “normal”。 |
3 |
animation-play-state |
規定動畫是否正在運行或暫停。預設是 “running”。 |
3 |
執行個體
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>nimation簡單研究</title> <style> .box{ width:100px; height:100px; background:gray; margin:50px; position:relative; animation:myfirst 5s infinite linear alternate; } @keyframes myfirst { 0% {left:0px;} 100% {left:200px;} } </style></head><body> <div class="box"> </div></body></html>
還要做什麼複雜的動畫的話可以自己琢磨了!(溜了溜了)
-
頂
-
0
-
踩
-
0
查看評論