Apakah peraturan tersuai yang digunakan untuk animasi css3?-tutorial css-php.cn

Apakah peraturan tersuai yang digunakan untuk animasi css3?

青灯夜游

Lepaskan： 2021-12-10 13:38:41

asal

2342 orang telah melayarinya

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;}}".

Apakah peraturan tersuai yang digunakan untuk animasi css3?

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;}}

Salin selepas log masuk

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 ...
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
    }
}

Salin selepas log masuk

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;
    }
}

Salin selepas log masuk

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>

Salin selepas log masuk

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!