動畫

=====================================================================================

1.@keyframes規則

2.animation屬性

Webkit內核的瀏覽器（Safari,chrome）需要加-webit-前綴。

持續時間：

animation-duration

-webkit-animation-duration

時間函數：

animation-timing-function

-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;}}

轉載于:https://blog.51cto.com/11562329/1773876

總結

以上是生活随笔為你收集整理的动画-animation的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。