Tutorial CSS Animation Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Definisi dan Penggunaan,Dukungan Browser,contoh,sifat animasi,

CSS Animation

Definisi dan Penggunaan

Beberapa properti CSS dapat animasi, yang berarti mereka dapat digunakan untuk animasi dan transisi.

Sifat animasi dapat secara bertahap berubah dari satu nilai yang lain, seperti ukuran, jumlah, dan persentase warna.


Dukungan Browser

Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi metode.

Segera setelah nomor -webkit-, moz, atau -o- menentukan browser pertama yang mendukung ini prefix versi atribut.

4.0 -webkit- 10,0 16.0
5.0 moz
4.0 -webkit- 15,0 -webkit-
12.1
12,0 -o-

contoh

Warna latar belakang secara bertahap berubah dari merah ke biru:

@keyframes mymove
{
from {background-color:red;}
to {left:blue;}
}

/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}

Coba »

sifat animasi

sifat CSS animasi:

milik contoh
latar belakang Coba "
background-color Coba "
background-position Coba "
background-size Coba "
batas Coba "
border-bottom Coba "
border-bottom-warna Coba "
border-bottom-kiri-radius Coba "
border-bottom-kanan radius Coba "
border-bottom-width Coba "
border-color Coba "
perbatasan-kiri Coba "
perbatasan-kiri-warna Coba "
perbatasan-kiri-lebar Coba "
batas kanan Coba "
batas kanan-warna Coba "
batas kanan-lebar Coba "
border-spacing Coba "
border-top Coba "
border-top-warna Coba "
border-top-kiri-radius Coba "
border-top-kanan-radius Coba "
border-top-width Coba "
bagian bawah Coba "
box-shadow Coba "
klip Coba "
warna Coba "
Kolom-count Coba "
Kolom-gap Coba "
Kolom-aturan Coba "
Kolom-aturan-warna Coba "
Kolom-aturan-lebar Coba "
Kolom-lebar Coba "
kolom Coba "
filter Coba "
melenturkan
flex-dasar Coba "
melenturkan-tumbuh Coba "
melenturkan-shrink Coba "
fon Coba "
font-size Coba "
font-size-adjust
font-stretch
font-weight Coba "
tinggi Coba "
kiri Coba "
letter-spacing Coba "
line-height Coba "
batas Coba "
margin-bottom Coba "
margin-left Coba "
margin-right Coba "
margin-top Coba "
max-height Coba "
max-width Coba "
min-height Coba "
min-width Coba "
kegelapan Coba "
pesanan Coba "
garis besar Coba "
outline-warna Coba "
garis-offset Coba "
garis-lebar Coba "
lapisan Coba "
padding-bottom Coba "
padding-left Coba "
padding-right Coba "
padding-top Coba "
perspektif Coba "
perspektif-asal Coba "
benar Coba "
text-decoration-warna Coba "
text-indent Coba "
text-shadow Coba "
teratas Coba "
mengubah Coba "
mengubah-asal Coba "
vertical-align Coba "
jarak penglihatan
lebar Coba "
kata-spacing Coba "
z-index Coba "
CSS Animation
10/30