Rumah > Artikel > hujung hadapan web > Apakah peraturan tersuai yang digunakan untuk animasi css3?

Apakah peraturan tersuai yang digunakan untuk animasi css3?

青灯夜游asal: 2021-12-10 13:38:412334semak imbas

Animasi CSS3 menggunakan "@keyframes" untuk menyesuaikan peraturan. "@keyframes" boleh menentukan peraturan animasi dan mentakrifkan kelakuan tempoh animasi CSS Sintaks ialah "@keyframes nama animasi {keyframes-selector {css-styles;}}".

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

@keyframes ialah peraturan CSS3 yang boleh digunakan untuk mentakrifkan gelagat tempoh animasi CSS dan mencipta animasi mudah.

Peraturan @keyframes terdiri daripada satu set peraturan gaya CSS terkapsul yang menerangkan cara nilai atribut berubah dari semasa ke semasa.

@keyframes animation-name {keyframes-selector {css-styles;}}

keyframes-selector: Mentakrifkan peratusan animasi, ia adalah antara 0% dan 100%. Animasi boleh mengandungi banyak pemilih.

Kemudian, menggunakan sifat animasi CSS yang berbeza, anda boleh mengawal pelbagai aspek animasi yang berbeza, termasuk bilangan lelaran animasi, sama ada untuk bergantian antara nilai mula dan tamat, dan animasi Sama ada ia harus berjalan atau berhenti seketika. Animasi juga boleh melambatkan masa mulanya.

Peraturan @keyframe terdiri daripada kata kunci "@keyframe", diikuti dengan pengecam yang memberikan nama animasi (yang akan dirujuk menggunakan animasi-nama), diikuti dengan set peraturan gaya (dibataskan oleh pendakap kerinting). Animasi kemudian digunakan pada elemen dengan menggunakan pengecam sebagai nilai atribut nama-animasi.

Sintaks:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

Dalam pendakap kerinting kita perlu mentakrifkan bingkai utama atau titik laluan yang menentukan sifat yang sedang dianimasikan pada titik tertentu semasa nilai animasi. Ini membolehkan kami mengawal langkah perantaraan dalam urutan animasi.

Sebagai contoh, @keyframe animasi ringkas boleh kelihatan seperti ini:

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100%{
    	background-color: red;
    }
}
.demo{
	 -webkit-animation:change-bg-color 5s infinite;
         animation: change-bg-color 5s infinite;
}

Apakah peraturan tersuai yang digunakan untuk animasi css3?

'0%', '50%', '100% ' Mereka semua adalah pemilih bingkai utama, dan setiap pemilih mentakrifkan peraturan bingkai utama. Blok pengisytiharan kerangka utama peraturan kerangka utama terdiri daripada atribut dan nilai.

Animasi di atas menyerupai kesan peralihan mudah: warna latar belakang berubah bermula dari satu nilai (0%) pada permulaan animasi, mencapai nilai (50%) di tengah dan mencapai nilai lain ( 100) pada akhir animasi %). Pemilih bingkai utama "0%", "50%", dan "100%" mentakrifkan titik jalan atau titik peratusan yang anda mahukan sifat animasi itu menukar nilai. Kami juga boleh menggunakan kata kunci pemilih dari, untuk bukannya menggunakan 0% dan 100% masing-masing, kata kunci tersebut adalah setara.

@keyframes change-bg-color {
   from{
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    to{
    background-color: red;
    }
}

Pemilih kerangka utama terdiri daripada satu atau lebih nilai peratusan dipisahkan koma atau kata kunci dari dan ke. Ambil perhatian bahawa penentu unit peratus mesti digunakan untuk nilai peratus. Oleh itu, '0' ialah pemilih kerangka kunci yang tidak sah.

Berikut ialah contoh animasi dengan pemilih bingkai utama yang merangkumi berbilang nilai peratusan dipisahkan koma dan/atau pemilih bingkai kunci kata kunci dari dan ke.

@keyframes bouncing {
    0%, 50%, 100% { /* 或者 from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}

Peraturan @keyframes di atas mentakrifkan: Offset teratas elemen akan sama dengan sifar pada permulaan, separuh dan akhir animasi dan ia akan menjadi suku dan tiga perempat daripada cara adalah sama dengan 100px ini bermakna elemen bergerak ke atas dan ke bawah beberapa kali semasa gelung animasi.

Contoh peraturan animasi css @keyframes yang ditentukan:

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

Apakah peraturan tersuai yang digunakan untuk animasi css3?

(Mempelajari perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Apakah peraturan tersuai yang digunakan untuk animasi css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 封装标识符循环选择器 animation

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 sifat apungan css? Apakah tiga nilainya?Artikel seterusnya：Apakah sifat apungan css? Apakah tiga nilainya?

Artikel berkaitan

Lihat lagi