Atur @keyframes CSS

Definisi dan penggunaan

Dengan atur @keyframes, Anda dapat membuat animasi.

Prinsip membuat animasi adalah, mengubah secara perlahan suatu set CSS style menjadi yang lain.

Dalam proses animasi, Anda dapat berulang kali mengubah这套 CSS style这套.

Atur waktu perubahan dengan persen, atau melalui kata kunci "from" dan "to", yang setara dengan 0% dan 100%.

0% adalah waktu awal animasi, 100% adalah waktu akhir animasi.

Petunjuk:Untuk mendapatkan dukungan browser yang terbaik, Anda sebaiknya selalu menentukan pemilih 0% dan 100%.

Petunjuk:Gunakan properti animasi untuk mengendalikan penampilan animasi, serta memasangkan animasi dengan pemilih.

Perhatian:!important aturannya diabaikan di frame penting (lihat contoh terakhir di halaman ini).

Lihat pula:

Panduan CSS3:Animasi CSS3

Contoh

Contoh 1

Buat elemen div bergerak turun dengan kecepatan yang sama:

@keyframes mymove {
  dari {top: 0px;}
  ke {top: 200px;}
}

Coba sendiri

Contoh 2

Menambah beberapa pemilihan selector keyframe dalam animasi:

@keyframes mymove {
  0% {top: 0px;}
  25% {top: 200px;}
  50% {top: 100px;}
  75% {top: 200px;}
  100% {top: 0px;}
}

Coba sendiri

Contoh 3

Mengubah beberapa gaya CSS dalam animasi:

@keyframes mymove {
  0% {top: 0px; background: merah; width: 100px;}
  100% {top: 200px; background: kuning; width: 300px;}
}

Coba sendiri

Contoh 4

Pemilihan selector keyframe dengan beberapa gaya CSS:

@keyframes mymove {
  0% {top: 0px; left: 0px; background: merah;}
  25% {top: 0px; left: 100px; background: biru;}
  50% {top: 100px; left: 100px; background: kuning;}
  75% {top: 100px; left: 0px; background: hijau;}
  100% {top: 0px; left: 0px; background: merah;}
}

Coba sendiri

Contoh 5

Perhatian:Aturan !important diabaikan di titik kunci:

@keyframes myexample {
  dari {top: 0px;}
  50% {top: 100px !important;} /* Diabaikan */
  ke {top: 200px;}
}

Coba sendiri

Sintaks CSS

@keyframes animationname {keyframes-selector {css-styles;}}

Nilai properti

Nilai Deskripsi
animationname Diperlukan. Tentukan nama animasi.
keyframes-selector

Diperlukan. Persentase durasi animasi.

Nilai sah:

  • 0-100%
  • dari (sama dengan 0%)
  • ke (sama dengan 100%)
css-styles Diperlukan. Satu atau lebih properti gaya CSS yang sah.

Pendukung browser

Chrome IE / Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-