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

Apakah yang perlu saya lakukan jika css animate tidak gelung?

青灯夜游
Lepaskan: 2021-12-29 15:09:14
asal
2717 orang telah melayarinya

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.

Apakah yang perlu saya lakukan jika css animate tidak gelung?

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>
Salin selepas log masuk

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 */
}
Salin selepas log masuk

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;
Salin selepas log masuk
描述
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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan