前端開發，CSS3動畫程式碼高頻知識點
- 2019 年 11 月 7 日
- 筆記
與transition十分相像，屬性略有差異，下面來看看她有哪些屬性
- animation-name keyframeName（動畫過渡的css屬性，只是不過這個是自己定義的keyframe）
- animation-duration動畫所花費的時間（同轉換）
- animation-timing-function速度曲線（同過渡）
- animation-delay動畫開始前的延遲（同轉換）
- animation-iteration-count動畫播放的次數
- animation-direction動畫播放的方向
動畫持續時間動畫計時功能動畫延遲這三個屬性與transition類似，忽略這塊。
動畫名稱
div { animation-name:mymove; animation-duration:5s; animation-name:mymove; animation-duration:5s; } @keyframes mymove { from {left:0px;} to {left:200px;} }
如上面的例子可知animation-name是可以任意名稱。這個名稱用關鍵幀來定義
@Keyframes中的樣式規則是由多個百分比構成的，如「 0％」到「 100％」之間，可創建多個百分比
例子中「從」「到」代表「 0％」到「 100％」
注意0％不能省略％
@Keyframe的語法綜合起來如下
@keyframes yourMoveName { from { Properties:Properties value; } Percentage { Properties:Properties value; } to { Properties:Properties value; } } 或者全部寫成百分比的形式： @keyframes IDENT { 0% { Properties:Properties value; } Percentage { Properties:Properties value; } 100% { Properties:Properties value; } }
yourMoveName：就是duration-name所要用到值，隨便取，語義化更好
百分比：百分之，可添加多個這樣的百分值
屬性：css屬性名，左側，背景
值：就是響應的屬性值
注意！animation目前只支援webkei內核的瀏覽器，所以需要在上面的基礎上加上-webket前綴
div { animation-name:mymove; animation-duration:5s; -webkit-animation-name:mymove; -webkit-animation-duration:5s; } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {left:0px;} to {left:200px;} }
動畫迭代次數
transition是觸發後發生的一次動畫，
animation動畫如flash，可重複播放，得設置animation-iteration-count屬性，自定義次數，infinite為無限次
動畫方向
指定動畫播放的方向，默認值是noraml，另一個值alterante是反向的意思。偶數次反向執行動畫
div { width:100px; height:100px; animation:myfirst 5s 5 alternate; -moz-animation:myfirst 5s 5 alternate; /* Firefox */ -webkit-animation:myfirst 5s 5 alternate; /* Safari and Chrome */ -o-animation:myfirst 5s 5 alternate; /* Opera */ } @keyframes myfirst { 0% left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {; left:200px; top:200px;} 75% {en; left:0px; top:200px;} 100% {left:0px; top:0px;} } @-moz-keyframes myfirst /* Firefox */ { 0% left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {; left:200px; top:200px;} 75% {en; left:0px; top:200px;} 100% {left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {; left:200px; top:200px;} 75% {en; left:0px; top:200px;} 100% {left:0px; top:0px;} } @-o-keyframes myfirst /* Opera */ { 0% left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {; left:200px; top:200px;} 75% {en; left:0px; top:200px;} 100% {left:0px; top:0px;} }
例子演示效果：http://www.zzfriend.com/demo/css3/lizi.html
兼容性
針對低版本的瀏覽器最好使用-webket-，-moz，-o -.- ms-
關於低版本的IE，動畫建議使用JS處理，css3不要勉強。
