這篇文章主要介紹了CSS3 @keyframes簡單動畫實現的相關資料,內容挺不錯的，現在分享給大家，也給大家做個參考。
CSS3 @keyframes簡單動畫實作
定義：
透過 @keyframes 規則，能夠創造動畫。
創建動畫的原理是，將一套 CSS 樣式逐漸改變為另一套樣式。
在動畫過程中，可以多次改變這套 CSS 樣式。
以百分比來規定改變發生的時間，或透過關鍵字 "from" 和 "to"，等價於 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結束時間。
為了獲得最佳的瀏覽器支持，應始終定義 0% 和 100% 選擇器。
重要：相容問題！ @keyfrmes 不相容IE 9 and 以及更早版本的瀏覽器.
語法：
@keyframes animationname {keyframes-selector {css-styles;}}
| |
| from（與0% 相同） |
to（與100% 相同）
#css-styles#必要。一個或多個合法的 CSS 樣式屬性。@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
//多个特性变化，用;隔开.
@-webkit-keyframes mymove{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}##############################################################################################
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome， infinite表示无限次循环，也可设置次数n：
animation-interation-count:n*/
}以上是CSS3中@keyframes動畫的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
