1. 動畫html
動畫(animation)是CSS3中具備顛覆性的特徵之一,可經過設置多個節點來精確控制一個或一組動畫,經常使用來實現複雜的動畫效果。
相比較過渡,動畫能夠實現更多變化,更多控制,連續自動播放等效果。動畫
1.1 動畫的基本使用ui
製做動畫分爲兩步:
1.先定義動畫
2.再使用(調用)動畫url
1. 用keyframes 定義動畫(相似定義類選擇器)spa
@keyframes 動畫名稱 { 0%{ width:100px; } 100%{ width:200px; } }
動畫序列code
1>0% 是動畫的開始,100% 是動畫的完成。這樣的規則就是動畫序列。
2>在 @keyframes 中規定某項 CSS 樣式,就能建立由當前樣式逐漸改成新樣式的動畫效果。
3>動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。您能夠改變任意多的樣式任意多的次數。
4>請用百分比來規定變化發生的時間,或用關鍵詞 "from" 和 "to",等同於 0% 和 100%。orm
2. 元素使用動畫htm
div { width: 200px; height: 200px; background-color: aqua; margin: 100px auto; /* 調用動畫 */ animation-name: 動畫名稱; /* 持續時間 */ animation-duration: 持續時間; }
1.2動畫經常使用屬性blog
1.3 動畫簡寫屬性ci
animation:動畫名稱 持續時間 運動曲線 什麼時候開始 播放次數 是否反方向 動畫起始或者結束的狀態;
animation: myfirst 5s linear 2s infinite alternate;
1>簡寫屬性裏面不包含 animation-play-state
2>暫停動畫:animation-play-state: puased; 常常和鼠標通過等其餘配合使用
3>想要動畫走回來 ,而不是直接跳回來:animation-direction : alternate
4>盒子動畫結束後,停在結束位置: animation-fill-mode : forwards
案例:熱點圖案例
<!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>Document</title> <style> body { background-color: #333; } .map { position: relative; width: 747px; height: 616px; background: url(media/map.png) no-repeat; margin: 0 auto; } .city { position: absolute; top: 227px; right: 193px; color: #fff; } .tb { top: 500px; right: 80px; } .dotted { width: 8px; height: 8px; background-color: #09f; border-radius: 50%; } .city div[class^="pulse"] { /* 保證咱們小波紋在父盒子裏面水平垂直居中 放大以後就會中心向四周發散 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; box-shadow: 0 0 12px #009dfd; border-radius: 50%; animation: pulse 1.2s linear infinite; } .city div.pulse2 { animation-delay: 0.4s; } .city div.pulse3 { animation-delay: 0.8s; } @keyframes pulse { 0% {} 70% { /* transform: scale(5); 咱們不要用scale 由於他會讓 陰影變大*/ width: 40px; height: 40px; opacity: 1; } 100% { width: 70px; height: 70px; opacity: 0; } } </style> </head> <body> <div class="map"> <div class="city"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> <div class="city tb"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> </div> </body> </html>
1.4 速度曲線細節
animation-timing-function:規定動畫的速度曲線,默認是「ease」