css3動畫如何設(shè)置執(zhí)行一次

發(fā)布時間：2022-01-13 13:31:26 來源：億速云閱讀：277 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“css3動畫如何設(shè)置執(zhí)行一次”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“css3動畫如何設(shè)置執(zhí)行一次”文章能幫助大家解決問題。

在css3中，可以利用animation-iteration-count屬性來設(shè)置動畫執(zhí)行一次，該屬性的作用就是定義動畫的播放次數(shù)；當(dāng)animation-iteration-count屬性的值設(shè)置為數(shù)字“1”時，即可設(shè)置動畫只播放一次。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在css3中，可以利用animation-iteration-count屬性來設(shè)置動畫執(zhí)行一次。

animation-iteration-count屬性可以定義動畫的播放次數(shù)，設(shè)置動畫應(yīng)該播放多少次。

語法：

animation-iteration-count: value;

值	描述
n	一個數(shù)字，定義應(yīng)該播放多少次動畫
infinite	指定動畫應(yīng)該播放無限次（永遠(yuǎn)）

示例：

設(shè)置動畫只播放一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				animation: mymove 3s;
				animation-iteration-count: 1;

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

			@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>

css3動畫如何設(shè)置執(zhí)行一次

修改一下，設(shè)置動畫播放3次

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;
}

css3動畫如何設(shè)置執(zhí)行一次

關(guān)于“css3動畫如何設(shè)置執(zhí)行一次”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。

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

css3動畫如何設(shè)置執(zhí)行一次

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽