Rumah > Artikel > hujung hadapan web > Apakah empat sifat berkaitan animasi css3?

Apakah empat sifat berkaitan animasi css3?

青灯夜游asal: 2022-01-17 16:02:282146semak imbas

Css3 menetapkan empat atribut yang berkaitan untuk animasi: 1. Atribut Transform, digunakan untuk menggunakan transformasi 2D atau 3D kepada elemen 2. Atribut peralihan, digunakan untuk mencapai kesan peralihan, digunakan untuk memberikan elemen Bind animasi; 4. "@keyframes" mentakrifkan kelakuan kitaran animasi.

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

Secara umumnya, terdapat hanya tiga sifat animasi CSS3: transformasi, peralihan dan animasi. Atribut

transform menggunakan transformasi 2D atau 3D pada elemen. Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen. Sifat

transition ialah sifat singkatan untuk menetapkan empat sifat peralihan:

harta peralihan
tempoh-peralihan
fungsi-masa-peralihan
kelewatan-peralihan

The

<code>animationanimasi

sifat ialah sifat trengkas untuk menetapkan enam sifat animasi:

animasi-nama
tempoh-animasi
fungsi-masa-animasi
penangguhan-animasi
kiraan-lelaran-animasi
arah-animasi

atribut animasi perlu digunakan bersama peraturan @keyframes sebelum ia boleh dibuat animasi.

@keyframes@keyframes

Peraturan

Peraturan @keyframes membolehkan anda mencipta animasi.

Animasi dicipta dengan menukar secara beransur-ansur satu set gaya CSS kepada yang lain.

Anda boleh menukar set gaya CSS ini beberapa kali semasa animasi.

Nyatakan masa apabila perubahan berlaku sebagai peratusan, atau melalui kata kunci "dari" dan "kepada", yang bersamaan dengan 0% dan 100%.

0% ialah masa mula animasi, 100% ialah masa tamat animasi.

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

			@keyframes mymove {
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}

			@-webkit-keyframes mymove

			/* Safari and Chrome */
				{
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

Untuk sokongan penyemak imbas terbaik anda harus sentiasa menentukan pemilih 0% dan 100%.

Apakah empat sifat berkaitan animasi css3?

(Mempelajari perkongsian video:

tutorial video css)

Atas ialah kandungan terperinci Apakah empat sifat berkaitan animasi css3?. 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：Bagaimana untuk mendapatkan hari ini dalam seminggu dengan JavaScriptArtikel seterusnya：Bagaimana untuk mendapatkan hari ini dalam seminggu dengan JavaScript

Artikel berkaitan

Lihat lagi