小編給大家分享一下css3動畫屬性是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：申請域名、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、南木林網(wǎng)站維護(hù)、網(wǎng)站推廣。

animation-name屬性

animation-name屬性：定義動畫名稱，用于指定由規(guī)則定義的動畫的一個或多個名稱。

注：animation-name屬性必須與規(guī)則@keyframes配合使用，因為動畫名稱是由@keyframes定義聲明的，如果提供多個屬性值用逗號隔開。

@keyframes規(guī)則相當(dāng)于一個命名空間，后面跟一個名詞，如果在class中的animation-name定義了與之對應(yīng)的name就可以執(zhí)行動畫。

animation-duration屬性用于指定執(zhí)行一個周期動畫應(yīng)該花多長時間。

時間以秒或毫秒指定，并且最初設(shè)置為“0”，這意味著動畫即時發(fā)生；我們可以指定一個持續(xù)時間或多個以逗號分隔的持續(xù)時間。

animation-timing-function屬性是用來設(shè)置播放方式的，它可以指定定時函數(shù)，該函數(shù)定義動畫對象隨時間的速度。它描述了動畫在其持續(xù)時間的一個周期內(nèi)如何進(jìn)展，允許它在其過程中改變速度。

取值如下：

ease：緩解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函數(shù)，既立方貝塞爾。

linear：線性效果，速度將從開始到結(jié)束穩(wěn)定。

ease-in：漸顯效果，動畫將緩慢啟動，然后獲得更多加速并穩(wěn)定到持續(xù)時間結(jié)束。

ease-out：漸隱效果，動畫將快速啟動，然后減速并穩(wěn)定到持續(xù)時間結(jié)束。

ease-in-out：漸顯漸隱效果，它是組合了ease-in和ease-out。動畫或過渡將開始緩慢，在中間加速，然后減速直至結(jié)束。

step-start：馬上跳轉(zhuǎn)到動畫結(jié)束狀態(tài)，動畫或過渡將突然變?yōu)榻Y(jié)束狀態(tài)并保持在該位置直到動畫結(jié)束。

step-end：動畫或過渡保持其開始狀態(tài)，直到動畫執(zhí)行結(jié)束，直接跳轉(zhuǎn)到其動畫結(jié)束狀態(tài)。

step(<number>[,[start | end]])：

step()可以將轉(zhuǎn)換的持續(xù)時間劃分為相等大小的間隔；或指定輸出百分比的變化是發(fā)生在間隔的開始還是結(jié)束。

第一個參數(shù)number為指定的間隔數(shù)，即把動畫分為n步階段性顯示，第二個參數(shù)默認(rèn)為end，設(shè)置最后一步狀態(tài)，start為結(jié)束時的狀態(tài)，end為開始時的狀態(tài)，若設(shè)置與animation-fill-mode的效果沖突，以animation-fill-mode的設(shè)置為動畫結(jié)束狀態(tài)。

cubic-bezier(,,,)：特殊的立方賽貝爾曲線效果

4、animation-delay屬性

animation-delay屬性：定義動畫何時開始（開始時間），它允許動畫在應(yīng)用后的某個時間開始執(zhí)行，或者在應(yīng)用之前看似已經(jīng)開始執(zhí)行一段時間。

初始值為“0”，這意味著動畫將在應(yīng)用于元素后立即開始播放。正時間值表示偏移量，該偏移量定義動畫開始之間（通過動畫屬性將動畫應(yīng)用于元素時）與開始執(zhí)行時的延遲時間。

我們還可以為animation-delay提供負(fù)值。負(fù)值，就像'0'一樣，意味著動畫一旦被應(yīng)用，就會立即執(zhí)行，但是由延遲的絕對值自動推進(jìn)，就好像動畫在過去已經(jīng)啟動了指定的時間，并且它似乎已經(jīng)在其游戲周期的中途開始了。例如，如果為animation-delay提供“-2S”的值，動畫將立即啟動，只要它被應(yīng)用，但它將顯示為它已經(jīng)啟動2s之前，你已經(jīng)應(yīng)用它。

animation-iteration-count屬性：用于指定動畫停止前播放動畫循環(huán)的次數(shù)，即：播放次數(shù)。

初始值為“1”，表示動畫將從頭到尾播放一次；通常會取“infinite”值，表示無限循環(huán)播放。

6、animation-direction屬性

animation-direction屬性：用于指定動畫是否應(yīng)在某些或所有循環(huán)或迭代中反向播放，即：播放方向。

該屬性可能取的值：

normal：正常方向

reverse：動畫反向運行，方向始終與normal相仿

alternate：動畫會循環(huán)正反交替運動

7、animation-fill-mode屬性

animation-fill-mode屬性定義動畫在播放后的狀態(tài)。更具體地說，它定義了在動畫延遲時間內(nèi)以及動畫完成執(zhí)行后應(yīng)用于元素的樣式。

該屬性可能取的值：

none：默認(rèn)值，不設(shè)置樣式

forwards：結(jié)束后保持動畫結(jié)束的狀態(tài)

backwards：結(jié)束后返回動畫開始時狀態(tài)

both：結(jié)束后可遵循forwards和backwards兩個規(guī)則

8、animation-play-state屬性

animation-play-state屬性：用于檢索或設(shè)置對象動畫的狀態(tài)，即：指定CSS 動畫是正在運行還是暫停。

該屬性可能取的值：

running：默認(rèn)值，運動；

paused：暫停。

我們也可以使用動畫的簡寫屬性animation屬性來一次性設(shè)置動畫的樣式：

/ *一個動畫定義的語法* / 
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];
/ *兩個動畫定義，用逗號隔開* / 
animation：animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state],           
                      [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

css3動畫屬性和@keyframes規(guī)則創(chuàng)建簡單動畫：

代碼實例：

HTML代碼：

<div class="container">
  <p class="text">
    php
  </p>
</div>

css代碼：

@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Gentium Basic', serif;
}

.container {
  margin: 50px auto;
  max-width: 700px;
}

.text {
  font-size: 3em;
  font-weight: bold;
  color: #009966;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-animation: fall 4s infinite;
  animation: fall 4s infinite;
}

@-webkit-keyframes fall {
  from, 15% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
    animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
  }
  50%, 60% {
    -webkit-transform: rotate(90deg) translateX(0);
    transform: rotate(90deg) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
    animation-timing-function: cubic-bezier(.13, .84, .82, 1);
  }
  85%, to {
    -webkit-transform: rotate(90deg) translateX(200px);
    transform: rotate(90deg) translateX(200px);
    opacity: 0;
  }
}

@keyframes fall {
  from, 15% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
    animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
  }
  50%,60% {
    -webkit-transform: rotate(90deg) translateX(0);
    transform: rotate(90deg) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
    animation-timing-function: cubic-bezier(.13, .84, .82, 1);
  }
  85%,to {
    -webkit-transform: rotate(90deg) translateX(200px);
    transform: rotate(90deg) translateX(200px);
    opacity: 0;
  }
}

以上是“css3動畫屬性是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站標(biāo)題：css3動畫屬性是什么-創(chuàng)新互聯(lián)
URL地址：http://www.rwnh.cn/article44/cssghe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、定制開發(fā)、網(wǎng)頁設(shè)計公司、動態(tài)網(wǎng)站、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)