css3動畫效果
阿新 • • 發佈:2017-06-27
rds 數值 耗時 無限 mil 動畫效果 for 函數 rect transform:translate( ) ....... } || from相當於0%
50%{ }
。。。。。
100%{ } || to{ } to相當於100%
}
添加動畫效果:
1 animation-name:指定動畫名稱 2.animation-duration:設置動畫的總耗時 3.animation-duration:設置的動畫的播放次數,默認為1次,可以指定具體的數值,也可以指定infinite(無限次) 4.animation-direction:alternate :社會交替動畫 alternate來回交替 5.animation-delay:2s 這是動畫的延遲 設置動畫結束時的狀態:默認情況下,動畫執行完畢之後,會回到原始狀態animation-fill-mode:both || forwards || backwards forwards:會保留動畫結束時的狀態,在有延遲的情況下,並不會立刻進行到動畫的初始狀態 backwards:不會保留動畫結束時的狀態,在添加了動畫延遲的前提下,如果動畫有初始狀態,name會立刻進行到初始狀態 both:會保留動畫的結束時狀態,在有延遲的情況下也會立刻進入到動畫的初始狀態 animation-tining-function:linear 勻速的 動畫的事件函數 animation-play-state:running || paused 播放 || 暫停 創建動畫 @keyframes dong(動畫名字) { 0%{
css3動畫效果