animation-iteration-count屬性的使用方法

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

我們提供的服務有：成都網(wǎng)站建設、做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、石鼓ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的石鼓網(wǎng)站制作公司

animation-iteration-count屬性是用于定義動畫播放次數(shù)的，設置animation-iteration-count屬性的值為infinite，就可實現(xiàn)動畫的無限循環(huán)播放。

CSS3 animation-iteration-count屬性

作用：animation-iteration-count 屬性定義動畫的播放次數(shù)。

語法：

animation-iteration-count: n|infinite;

n：定義動畫播放次數(shù)的數(shù)值。

infinite：規(guī)定動畫應該無限次播放。

注：Internet Explorer 9 以及更早的版本不支持 animation-iteration-count 屬性。

CSS3 animation-iteration-count屬性的使用示例

設置動畫循環(huán)3次

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s;
animation-iteration-count:3;

/* Safari and Chrome */
-webkit-animation:mymove 3s;
-webkit-animation-iteration-count:3;
}

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

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

<div></div>

</body>
</html>

效果圖：

animation-iteration-count屬性的使用方法

感謝你能夠認真閱讀完這篇文章，希望小編分享animation-iteration-count屬性的使用方法內容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細的解決方法等著你來學習!

分享標題：animation-iteration-count屬性的使用方法
文章路徑：http://bm7419.com/article22/igsccc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、用戶體驗、網(wǎng)站改版、Google、電子商務、品牌網(wǎng)站建設

廣告

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

網(wǎng)站建設網(wǎng)站維護公司