css3-animation用法簡記
阿新 • • 發佈:2018-12-23
css3實現動畫三種方式:Transform 、Transition 、Animation
Transform:只關於形變,位置變。
Transition:只關於變的過程,包括元素,時間、方式
Animation:是Transform 、Transition的結合。
animation語法:
name : 動畫名稱
duration:
是動畫持續時間
取值,如:5s
timing-function:
動畫變換速率
取值:ease;ease-in;ease-in-out;linear;cubic-bezier
delay:
動畫執行延遲時間
取值,如:5s
iteration-count:
動畫播放次數
取值:infinite(無限次),n(n次)
direction :
動畫播放方向
取值:normal(正向播放)、alternate(正反反正)、reverse(反向播放)、alternate-reverse(反正正反)
fill-mode :
動畫結束時停止狀態
取值:none(沒有執行動畫前的狀態)、forward(最後一幀)、backward(第一幀)、both(根據animation-direction輪執行forwards和backwards)
play-state:
動畫播放狀態
取值: running(播放狀態)、paused(暫停狀態)
Transform:只關於形變,位置變。
Transition:只關於變的過程,包括元素,時間、方式
Animation:是Transform 、Transition的結合。
animation使用方式:如下
關鍵幀:
@keyframes name{ 0%{ transform:translateY(0); } 30%{ transform:translateY(-10px); } 50%{ transform:translateY(-15px); } 60%{ transform:translateY(0); } 80%{ transform:translateY(5px); } 100%{ transform:translateY(15px); } }
animation語法:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
name : 動畫名稱
duration:
是動畫持續時間
取值,如:5s
timing-function:
動畫變換速率
取值:ease;ease-in;ease-in-out;linear;cubic-bezier
delay:
動畫執行延遲時間
取值,如:5s
iteration-count:
動畫播放次數
取值:infinite(無限次),n(n次)
direction :
動畫播放方向
取值:normal(正向播放)、alternate(正反反正)、reverse(反向播放)、alternate-reverse(反正正反)
fill-mode :
動畫結束時停止狀態
取值:none(沒有執行動畫前的狀態)、forward(最後一幀)、backward(第一幀)、both(根據animation-direction輪執行forwards和backwards)
play-state:
動畫播放狀態
取值: running(播放狀態)、paused(暫停狀態)
做個筆記供隨時查詢,如有不妥之處,歡迎指點喲。