CSS3 Animasi
animasi CSS3 memungkinkan animasi yang paling elemen HTML tanpa menggunakan JavaScript atau Flash!
animasi
Browser Dukungan untuk Animasi
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit-, -moz- , atau -o- menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| @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- |
| animation | 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- |
Apa CSS3 Animasi?
Animasi memungkinkan elemen secara bertahap berubah dari satu gaya ke yang lain.
Anda dapat mengubah banyak properti CSS yang Anda inginkan, sebanyak yang Anda inginkan.
Untuk menggunakan CSS3 animasi, Anda harus terlebih dahulu menentukan beberapa keyframes untuk animasi.
Keyframes terus gaya apa elemen akan memiliki pada waktu tertentu.
The @keyframes Aturan
Ketika Anda menentukan gaya CSS dalam @keyframes aturan, animasi secara bertahap akan berubah dari gaya saat ini untuk gaya baru pada waktu tertentu.
Untuk mendapatkan animasi untuk bekerja, Anda harus mengikat animasi untuk elemen.
Contoh berikut mengikat "contoh" animasi dengan <div> elemen. Animasi akan berlangsung selama 4 detik, dan secara bertahap akan mengubah background-warna <div> elemen dari "merah" untuk "kuning":
Contoh
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Cobalah sendiri " Catatan: Jika animation-duration properti tidak ditentukan, animasi tidak akan berpengaruh, karena nilai default adalah 0.
Dalam contoh di atas kita telah ditentukan ketika gaya akan berubah dengan menggunakan kata kunci "from" dan "to" (yang mewakili 0% (mulai) dan 100% (lengkap)).
Hal ini juga memungkinkan untuk menggunakan persen. Dengan menggunakan persen, Anda dapat menambahkan banyak perubahan gaya yang Anda inginkan.
Contoh berikut akan mengubah background-warna <div> elemen ketika animasi adalah 25% selesai, 50% selesai, dan lagi ketika animasi adalah 100% selesai:
Contoh
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
} Cobalah sendiri " Contoh berikut akan mengubah baik background-warna dan posisi <div> elemen ketika animasi adalah 25% selesai, 50% selesai, dan lagi ketika animasi adalah 100% selesai:
Contoh
/* The animation code */
@keyframes example
{
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background-color: blue; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
} Cobalah sendiri " Menunda sebuah Animasi
The animation-delay properti menetapkan penundaan untuk memulai animasi.
Contoh berikut memiliki delay 2 detik sebelum memulai animasi:
Contoh
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
} Cobalah sendiri " Set Berapa kali seorang Animasi Harus Jalankan
The animation-iteration-count properti menentukan jumlah kali animasi harus dijalankan.
Contoh berikut akan menjalankan animasi 3 kali sebelum berhenti:
Contoh
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
} Cobalah sendiri " Contoh berikut menggunakan nilai " infinite " untuk membuat animasi terus untuk selama-lamanya:
Contoh
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
} Cobalah sendiri " Jalankan Animasi di Arah ulang atau Cycles Alternatif
The animation-direction properti digunakan untuk membiarkan animasi berjalan di arah sebaliknya atau siklus alternatif.
Contoh berikut akan menjalankan animasi di arah sebaliknya:
Contoh
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
reverse;
} Cobalah sendiri " Contoh berikut menggunakan nilai "alternate" untuk membuat animasi pertama berjalan ke depan, kemudian mundur, kemudian maju:
Contoh
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
alternate;
} Cobalah sendiri " Tentukan Curve Kecepatan Animasi
The animation-timing-function properti menentukan kurva kecepatan animasi.
Properti animasi-waktu-fungsi dapat memiliki nilai berikut:
-
ease- menentukan sebuah animasi dengan awal yang lambat, kemudian cepat, kemudian berakhir perlahan (ini adalah default) -
linear- menentukan sebuah animasi dengan kecepatan yang sama dari awal sampai akhir -
ease-in- menentukan animasi dengan awal yang lambat -
ease-out- menentukan animasi dengan ujung yang lambat -
ease-in-out- menentukan animasi dengan awal yang lambat dan akhir -
cubic-bezier(n,n,n,n)- memungkinkan Anda menentukan nilai Anda sendiri dalam fungsi kubik-bezier
Contoh berikut menunjukkan beberapa kurva kecepatan yang berbeda yang dapat digunakan:
Contoh
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;} Cobalah sendiri " Animasi Singkatan Properti
Contoh di bawah ini menggunakan enam sifat animasi:
Contoh
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Cobalah sendiri " Efek animasi yang sama seperti di atas dapat dicapai dengan menggunakan singkatan animation properti:
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 » Latihan 6»
CSS3 Animasi Properti
Tabel berikut berisi daftar @keyframes aturan dan semua properti animasi:
| Milik | Deskripsi |
|---|---|
| @keyframes | Menentukan kode animasi |
| animation | Sebuah properti singkat untuk setting semua properti animasi |
| animation-delay | Menentukan penundaan untuk memulai animasi |
| animation-direction | Menentukan apakah animasi harus bermain di arah sebaliknya atau siklus alternatif |
| animation-duration | Menentukan berapa detik atau milidetik animasi yang diperlukan untuk menyelesaikan satu siklus |
| animation-fill-mode | Menentukan gaya untuk elemen ketika animasi tidak bermain (ketika selesai, atau ketika memiliki penundaan) |
| animation-iteration-count | Menentukan jumlah kali animasi harus dimainkan |
| animation-name | Menentukan nama @keyframes animasi |
| animation-play-state | Menentukan apakah animasi sedang berjalan atau berhenti |
| animation-timing-function | Menentukan kurva kecepatan animasi |