Rumah > Artikel > hujung hadapan web > Apakah yang perlu saya lakukan jika css animate tidak gelung?

Apakah yang perlu saya lakukan jika css animate tidak gelung?

青灯夜游asal: 2021-12-29 15:09:142691semak imbas

Atribut animation-iteration-count boleh digunakan dalam CSS untuk menyelesaikan masalah animasi tidak gelung. count:infinite;" gaya ke animasi untuk mencapai ini. Gelung tanpa had.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Animasi dalam CSS tidak gelung, yang boleh diselesaikan dengan menggunakan atribut kiraan lelaran animasi.

Contohnya:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: pink;
				margin: 100px;
				animation: mymove 5s;
				-webkit-animation: mymove 5s; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

Apakah yang perlu saya lakukan jika css animate tidak gelung?

Hanya limpahan putaran ke hadapan dan belakang, tiada gelung untuk mencapai putaran, bagaimana untuk melakukan ini? Mudah, hanya gunakan atribut animation-iteration-count untuk menyelesaikannya.

div {
	width: 100px;
	height: 100px;
	background: pink;
	margin: 100px;
	animation: mymove 5s;
	-webkit-animation: mymove 5s; /* Safari and Chrome */
	animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;/* Safari and Chrome */
}

Apakah yang perlu saya lakukan jika css animate tidak gelung?

Arahan:

Gunakan atribut animation-iteration-count untuk menentukan bilangan kali animasi dimainkan . Tatabahasa:

animation-iteration-count: value;

值	描述
n	一个数字，定义应该播放多少次动画
infinite	指定动画应该播放无限次（永远）

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika css animate tidak gelung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Apakah itu css3 dan HTML5Artikel seterusnya：Apakah itu css3 dan HTML5

Artikel berkaitan

Lihat lagi