溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css3中animation屬性的使用方法

發(fā)布時(shí)間：2020-09-24 14:31:36 來(lái)源：億速云 閱讀：209 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹了css3中animation屬性的使用方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

css3 animation屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，通過(guò)設(shè)置六個(gè)動(dòng)畫(huà)屬性來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。這六個(gè)屬性分別為動(dòng)畫(huà)名稱、動(dòng)畫(huà)時(shí)間、速度曲線、動(dòng)畫(huà)延遲、播放次數(shù)及動(dòng)畫(huà)是否反向播放。

css3 animation屬性

作用：animation 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置六個(gè)動(dòng)畫(huà)屬性。

語(yǔ)法：

animation: name duration timing-function delay iteration-count direction;

說(shuō)明：animation 屬性可以設(shè)置的六個(gè)動(dòng)畫(huà)屬性分別為：

●　animation-name：規(guī)定需要綁定到選擇器的 keyframe 名稱。

●　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è)置 animation-duration 屬性，否則當(dāng)時(shí)長(zhǎng)為 0時(shí)，就不會(huì)播放動(dòng)畫(huà)了。

css3 animation屬性的使用示例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>

<p><strong>注釋：</strong>Internet Explorer 9 以及更早的版本不支持 animation 屬性。</p>

<div></div>

</body>
</html>

效果圖：

css3中animation屬性的使用方法

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css3中animation屬性的使用方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手