CSS3 animation 屬性

2022-06-02 14:21 更新

定義和用法

animation 屬性是六個(gè)動(dòng)畫(huà)屬性的速記屬性:

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

注釋?zhuān)赫?qǐng)始終規(guī)定 animation-duration 屬性,否則時(shí)長(zhǎng)為 0,就不會(huì)播放動(dòng)畫(huà)了。

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


語(yǔ)法

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


實(shí)例

實(shí)例

使用簡(jiǎn)寫(xiě)屬性,將動(dòng)畫(huà)與 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 屬性。

注釋?zhuān)?/span>Internet Explorer 9 以及更早的版本不支持 animation 屬性。


相關(guān)頁(yè)面

CSS3 教程:CSS3 動(dòng)畫(huà)


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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)