Atribut-Attribut Animaasi CSS

Definisi dan Penggunaan

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

Properti yang dapat diatur animasi dapat berubah dari nilai ke nilai lain, seperti ukuran, angka, persen dan warna.

Dukungan Browser

Angka dalam tabel menunjukkan versi pertama browser yang mendukung animasi CSS penuh.

Angka setelah -webkit-、-moz- atau -o- menunjukkan versi pertama yang digunakan prefix.

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-

Contoh

Atur animasi warna latar belakang dari merah ke biru:

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

Coba Sendiri

Properti Animasi

Dalam tabel di bawah ini tercantum properti yang berhubungan dengan animasi CSS:

属性 TIY
background Coba sendiri
background-color Coba sendiri
background-position Coba sendiri
background-size Coba sendiri
border Coba sendiri
border-bottom Coba sendiri
border-bottom-color Coba sendiri
border-bottom-left-radius Coba sendiri
border-bottom-right-radius Coba sendiri
border-bottom-width Coba sendiri
border-color Coba sendiri
border-left Coba sendiri
border-left-color Coba sendiri
border-left-width Coba sendiri
border-right Coba sendiri
border-right-color Coba sendiri
border-right-width Coba sendiri
border-spacing Coba sendiri
border-top Coba sendiri
border-top-color Coba sendiri
border-top-left-radius Coba sendiri
border-top-right-radius Coba sendiri
border-top-width Coba sendiri
bottom Coba sendiri
box-shadow Coba sendiri
clip Coba sendiri
color Coba sendiri
column-count Coba sendiri
column-gap Coba sendiri
column-rule Coba sendiri
column-rule-color Coba sendiri
column-rule-width Coba sendiri
column-width Coba sendiri
columns Coba sendiri
filter Coba sendiri
flex Coba sendiri
flex-basis Coba sendiri
flex-grow Coba sendiri
flex-shrink Coba sendiri
font Coba sendiri
font-size Coba sendiri
font-size-adjust
font-stretch
font-weight Coba sendiri
grid Coba sendiri
grid-area Coba sendiri
grid-auto-columns Coba sendiri
grid-auto-flow Coba sendiri
grid-auto-rows Coba sendiri
grid-column Coba sendiri
grid-column-end Coba sendiri
grid-column-gap Coba sendiri
grid-column-start Coba sendiri
grid-gap Coba sendiri
grid-row Coba sendiri
grid-row-end Coba sendiri
grid-row-gap Coba sendiri
grid-row-start Coba sendiri
grid-template Coba sendiri
grid-template-areas Coba sendiri
grid-template-columns Coba sendiri
grid-template-rows Coba sendiri
height Coba sendiri
left Coba sendiri
letter-spacing Coba sendiri
line-height Coba sendiri
margin Coba sendiri
margin-bottom Coba sendiri
margin-left Coba sendiri
margin-right Coba sendiri
margin-top Coba sendiri
max-height Coba sendiri
max-width Coba sendiri
min-height Coba sendiri
min-width Coba sendiri
object-position Coba sendiri
opacity Coba sendiri
order Coba sendiri
outline Coba sendiri
outline-color Coba sendiri
outline-offset Coba sendiri
outline-width Coba sendiri
padding Coba sendiri
padding-bottom Coba sendiri
padding-left Coba sendiri
padding-right Coba sendiri
padding-top Coba sendiri
perspective Coba sendiri
perspective-origin Coba sendiri
right Coba sendiri
text-decoration-color Coba sendiri
text-indent Coba sendiri
text-shadow Coba sendiri
top Coba sendiri
transform Coba sendiri
transform-origin Coba sendiri
vertical-align Coba sendiri
visibility
width Coba sendiri
word-spacing Coba sendiri
z-index Coba sendiri