在css3中，用 @keyframes 規則來定義動畫的。
可以看到，在ie10以前的版本是不相容css3動畫的，而且特定的瀏覽器需要使用特定的字首來讓瀏覽器支援動畫效果。所以使用css3動畫需要考慮一下瀏覽器相容的問題。
下面是乙個動畫定義的例子。
@keyframes circle
100%
}
在這個例子中，首先通過@keyframes準則來定義乙個名為 circle 的動畫。在定義的內容中，有兩種方式，一種就像這個例子中的寫法，通過百分比來定義動畫的某個狀態下的css屬性。譬如，上面這個例子的0%中的內容，表示這個動畫的開始狀態下的css屬性是這個元素靜止狀態下轉動0°的樣子(也就是不轉)，100%表示乙個動畫過程結束時的css屬性是這個元素靜止狀態下轉動360°的樣子。所以這個動畫全過程便是從靜止狀態下開始，轉動一周，結束停止。而另外一種方式則是使用from和to來表示動畫開始與結束時的狀態。上面的例子可改寫為：
@keyframes circle
to}
定義好動畫的內容以後便可以在需要動畫效果的元素中來使用這個動畫效果。
class
="circle"
>
div>
.circle
.circle
@-moz-keyframes circle
100%
}@-webkit-keyframes circle
100%
}@-o-keyframes circle
100%
}@keyframes circle
100%
}
《前端》css3動畫效果
語法 transform none transform functions translatex x 定義轉換，只是用 x 軸的值。translatey y 定義轉換，只是用 y 軸的值。translatez z 定義 3d 轉換，只是用 z 軸的值。rotatex angle 定義沿著 x 軸的 ...
CSS3學習筆記 動畫
css3中的動畫功能分為transitions功能和animations功能 支援從乙個屬性在指定時間內平滑過渡到另乙個屬性值 transitions功能具有的屬性 1 transition property 哪種屬性平滑過渡 2 tranition duration 在多久時間內完成屬性的平滑過渡...
CSS3動畫 學習打卡
animation name屬性 1 檢索或者設定物件所應用的動畫的名稱 2 語法 keyframename none 3 引數說明 1 keyframename 指定要繫結到選擇器的關鍵幀的名稱 2 none 指定有沒有動畫 可用於覆蓋從級聯的動畫 animation duration屬性 小結 ...