1. Rumah
  2. CSS3 @keyframes aturan

Tutorial CSS3 @keyframes aturan Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari contoh,Dukungan Browser,Tag definisi dan petunjuk,tatabahasa,contoh online,contoh,contoh,contoh,Artikel terkait,

CSS3 @keyframes aturan

contoh

Membuat elemen div secara bertahap bergerak 200 piksel:

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

Coba »
Di bagian bawah halaman ini untuk lebih banyak contoh.

Dukungan Browser

属性
@keyframes 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-

Tag definisi dan petunjuk

Gunakan @keyframes aturan, Anda dapat membuat animasi.

Membuat animasi secara bertahap mengubah pengaturan dari satu gaya CSS yang lain.

Selama animasi, Anda dapat mengubah gaya CSS terbenam.

Gunakan terjadi ketika perubahan yang ditentukan dalam%, atau kata kunci "dari" dan "untuk", dan ini adalah 0% sampai 100% identik.

0% adalah awal dari animasi, 100% ketika animasi selesai.

Untuk mendukung browser yang optimal, Anda harus selalu didefinisikan sebagai 0% dan 100% dari pemilih.

Catatan: Gunakan properti animasi untuk mengontrol penampilan animasi juga digunakan untuk memilih animasi mengikat..

tatabahasa

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

nilai penjelasan
animationname Diperlukan. Tentukan nama animasi.
keyframes-pemilih Diperlukan. Persentase durasi animasi.

nilai hukum:

0-100%
dari (dan 0% identik)
(dan 100% identik)

Catatan: Anda dapat menggunakan animasi keyframe-penyeleksi.

css-gaya Diperlukan. Satu atau lebih sah atribut gaya CSS

contoh

contoh online


contoh

Banyak pemilih bingkai kunci untuk menambahkan film:

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

@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}

Coba »

contoh

Mengubah banyak gaya CSS dalam satu animasi:

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

@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

Coba »

contoh

Banyak pemilih keyframe dengan banyak gaya CSS:

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

Coba »

Artikel terkait

CSS3 Tutorial: CSS3 Animasi

Tutorial Panas

Hubungi kami

CSS3 @keyframes aturan
10/30