動畫css
=====================================================================================web
1.@keyframes規則chrome
2.animation屬性瀏覽器
Webkit內核的瀏覽器(Safari,chrome)須要加-webit-前綴。ide
持續時間:函數
animation-duration動畫
-webkit-animation-durationurl
時間函數:spa
animation-timing-functionorm
-webkit-animation-timing-function
延遲時間:
animation-delay
-webkit-animation-delay
動畫執行次數:
animation-iteration-count: count / infinite(無限次)
-webkit-animation-iteration-count:
動畫播放方向:
animation-direction: normal / reverse /alternate / alternate-reverse
//正常 / 反向 / 第一次正常第二次反向 / 第一次反向第二次正常
-webkit-animation-direction:
動畫播放先後的狀態:
animation-fill-mode: none / backwards / forwards /both
// 默認值 / 設置播放以前的元素狀態和第一個關鍵幀相同 / 播放後的
狀態和最後一個關鍵幀相同
-webkit-animation-fill-mode:
控制動畫運行或暫停:
animation-play-state: running / paused
-webkit-animation-play-state
*****************************************************************************************
全部和animation相關的樣式均可以寫在animation屬性內:
但 1. 至少要有animation-name 和 animation-duration
2. animation-duration在animation-delay以前
div{ height:100px; width:100px; background: url(p_w_picpaths/ball.png); background-size:99.5%; animation:myball_1 6s linear infinite alternate, myball_2 6s linear infinite; -webkit-animation:myball_1 6s linear infinite alternate, myball_2 6s linear infinite; animation-play-state:running; -webkit-animation-play-state:running; } div:hover{ animation-play-state:paused; -webkit-animation-play-state:paused; } @keyframes myball_1{ 100%{ transform :rotate(360deg);} } @-webkit-keyframes myball_1{ 100%{transform:rotate(360deg);} } @keyframes myball_2{ 0%,50%,100%{ opacity :1;} 25%,75%{ opacity:0 ;} } @-webkit-keyframes myball_2{ 0%,50%,100%{opacity:1;} 25%,75%{opacity:0;} }