Bagaimana untuk menetapkan animasi untuk dimainkan selepas beberapa saat dalam css3-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menetapkan animasi untuk dimainkan selepas beberapa saat dalam css3

青灯夜游

Lepaskan： 2022-03-18 16:33:46

asal

3235 orang telah melayarinya

Dalam CSS3, anda boleh menggunakan atribut animation-delay untuk menetapkan animasi untuk dimainkan selepas beberapa saat Atribut ini boleh menetapkan masa tunda animasi objek, iaitu, masa menunggu sebelum animasi bermula , dalam saat atau milisaat; sintaks "animation -delay: value unit;", unit boleh menjadi saat (s) atau milisaat (ms).

Bagaimana untuk menetapkan animasi untuk dimainkan selepas beberapa saat dalam css3

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

Dalam CSS3, anda boleh menggunakan atribut kelewatan animasi untuk menetapkan animasi untuk dimainkan selepas beberapa saat.

Atribut animasi-tunda boleh mengambil semula atau menetapkan masa tunda animasi objek secara sewenang-wenangnya, iaitu, menentukan masa animasi bermula.

Sintaks:

animation-delay: time;

Salin selepas log masuk

masa: Tentukan masa untuk menunggu sebelum animasi bermula, dalam saat atau milisaat (unit nilai boleh menjadi saat atau milisaat ms); nilai lalai ialah 0.

Petua: Nilai negatif dibenarkan, -2s menyebabkan animasi dimulakan serta-merta, tetapi melangkau 2 saat untuk memasuki animasi.

Contoh: Lengah 5 saat untuk memulakan animasi

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

				/*Safari and Chrome*/
				-webkit-animation: mymove 5s infinite;
				-webkit-animation-delay: 5s;
			}

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

				to {
					left: 200px;
				}
			}

			@-webkit-keyframes mymove

			/*Safari and Chrome*/
				{
				from {
					left: 0px;
				}

				to {
					left: 200px;
				}
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

Salin selepas log masuk

Bagaimana untuk menetapkan animasi untuk dimainkan selepas beberapa saat dalam css3

(Belajar perkongsian video: tutorial video css, bahagian hadapan web)

Atas ialah kandungan terperinci Bagaimana untuk menetapkan animasi untuk dimainkan selepas beberapa saat dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!