CSS3 animation 屬性

2022-06-02 14:21 更新

定義和用法

animation 屬性是六個動畫屬性的速記屬性:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

注釋:請始終規(guī)定 animation-duration 屬性,否則時長為 0,就不會播放動畫了。

默認值: none 0 ease 0 1 normal
繼承性: no
版本: CSS3
JavaScript 語法: object.style.animation="mymove 5s infinite"


語法

animation: name duration timing-function delay iteration-count direction;
描述
animation-name 規(guī)定需要綁定到選擇器的 keyframe 名稱。。
animation-duration 規(guī)定完成動畫所花費的時間,以秒或毫秒計。
animation-timing-function 規(guī)定動畫的速度曲線。
animation-delay 規(guī)定在動畫開始之前的延遲。
animation-iteration-count 規(guī)定動畫應(yīng)該播放的次數(shù)。
animation-direction 規(guī)定是否應(yīng)該輪流反向播放動畫。


實例

實例

使用簡寫屬性,將動畫與 div 元素綁定:

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

嘗試一下 ?


瀏覽器支持

屬性
animation 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

Internet Explorer 10、Firefox 以及 Opera 支持 animation 屬性。

Safari 和 Chrome 支持替代的 -webkit-animation 屬性。

注釋:Internet Explorer 9 以及更早的版本不支持 animation 屬性。


相關(guān)頁面

CSS3 教程:CSS3 動畫


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號