Animasi CSS
Animasi CSS
CSS memungkinkan animasi elemen HTML tanpa menggunakan JavaScript atau Flash!
Dalam bab ini Anda akan mempelajari tentang sifat-sifat berikut:
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
Dukungan Browser untuk Animasi
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
@keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
Apa itu Animasi CSS?
Animasi memungkinkan elemen secara bertahap berubah dari satu gaya ke gaya lainnya.
Anda dapat mengubah properti CSS sebanyak yang Anda inginkan, sebanyak yang Anda inginkan.
Untuk menggunakan animasi CSS, Anda harus terlebih dahulu menentukan beberapa keyframe untuk animasi tersebut.
Keyframes menyimpan gaya apa yang akan dimiliki elemen pada waktu tertentu.
Aturan @keyframes
Saat Anda menentukan gaya CSS di dalam @keyframes
aturan, animasi akan berubah secara bertahap dari gaya saat ini ke gaya baru pada waktu tertentu.
Agar animasi berfungsi, Anda harus mengikat animasi ke elemen.
Contoh berikut mengikat animasi "contoh" ke elemen <div>. Animasi akan berlangsung selama 4 detik, dan secara bertahap akan mengubah warna latar belakang elemen <div> dari "merah" menjadi "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;
}
Catatan: Properti animation-duration
menentukan berapa lama waktu yang dibutuhkan untuk menyelesaikan animasi. Jika animation-duration
properti tidak ditentukan, tidak ada animasi yang akan muncul, karena nilai defaultnya adalah 0s (0 detik).
Pada contoh di atas kami telah menentukan kapan gaya akan berubah dengan menggunakan kata kunci "dari" dan "ke" (yang mewakili 0% (mulai) dan 100% (selesai)).
Dimungkinkan juga untuk menggunakan persen. Dengan menggunakan persen, Anda dapat menambahkan perubahan gaya sebanyak yang Anda suka.
Contoh berikut akan mengubah warna latar belakang elemen <div> saat animasi 25% selesai, 50% selesai, dan lagi saat animasi 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;
}
Contoh berikut akan mengubah warna latar dan posisi elemen <div> saat animasi 25% selesai, 50% selesai, dan lagi saat animasi 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;
}
Tunda Animasi
Properti animation-delay
menentukan penundaan untuk memulai animasi.
Contoh berikut memiliki penundaan 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;
}
Nilai negatif juga diperbolehkan. Jika menggunakan nilai negatif, animasi akan mulai seolah-olah sudah diputar selama N detik.
Dalam contoh berikut, animasi akan mulai seolah-olah sudah diputar selama 2 detik:
Contoh
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Atur Berapa Kali Animasi Harus Dijalankan
Properti animation-iteration-count
menentukan berapa 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;
}
Contoh berikut menggunakan nilai "infinite" untuk membuat animasi berlanjut selamanya:
Contoh
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
}
Jalankan Animasi dalam Arah Terbalik atau Siklus Alternatif
Properti animation-direction
menentukan apakah animasi harus diputar maju, mundur, atau dalam siklus alternatif.
Properti animasi-arah dapat memiliki nilai berikut:
normal
- Animasi diputar seperti biasa (maju). Ini adalah defaultreverse
- Animasi diputar dalam arah terbalik (mundur)alternate
- Animasi diputar ke depan dulu, lalu ke belakangalternate-reverse
- Animasi diputar mundur dulu, lalu maju
Contoh berikut akan menjalankan animasi dalam arah terbalik (mundur):
Contoh
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction:
reverse;
}
Contoh berikut menggunakan nilai "alternate" untuk membuat animasi berjalan maju terlebih dahulu, lalu mundur:
Contoh
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate;
}
Contoh berikut menggunakan nilai "alternate-reverse" untuk membuat animasi berjalan mundur terlebih dahulu, lalu maju:
Contoh
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate-reverse;
}
Tentukan Kurva Kecepatan Animasi
Properti animation-timing-function
menentukan kurva kecepatan animasi.
Properti fungsi animasi-waktu dapat memiliki nilai berikut:
ease
- Menentukan animasi dengan awal yang lambat, lalu cepat, lalu berakhir perlahan (ini default)linear
- Menentukan animasi dengan kecepatan yang sama dari awal hingga akhirease-in
- Menentukan animasi dengan awal yang lambatease-out
- Menentukan animasi dengan akhir yang lambatease-in-out
- Menentukan animasi dengan awal dan akhir yang lambatcubic-bezier(n,n,n,n)
- Memungkinkan Anda menentukan nilai Anda sendiri dalam fungsi kubik-bezier
Contoh berikut menunjukkan beberapa kurva kecepatan 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;}
Tentukan mode pengisian Untuk Animasi
Animasi CSS tidak mempengaruhi elemen sebelum keyframe pertama dimainkan atau setelah keyframe terakhir dimainkan. Properti animation-fill-mode dapat menimpa perilaku ini.
Properti animation-fill-mode
menentukan gaya untuk elemen target saat animasi tidak diputar (sebelum dimulai, setelah berakhir, atau keduanya).
Properti animation-fill-mode dapat memiliki nilai berikut:
none
- Nilai bawaan. Animasi tidak akan menerapkan gaya apa pun ke elemen sebelum atau setelah dieksekusiforwards
- Elemen akan mempertahankan nilai gaya yang ditetapkan oleh bingkai utama terakhir (tergantung pada arah animasi dan jumlah iterasi animasi)backwards
- Elemen akan mendapatkan nilai gaya yang ditetapkan oleh bingkai utama pertama (bergantung pada arah animasi), dan mempertahankannya selama periode penundaan animasiboth
- Animasi akan mengikuti aturan untuk maju dan mundur, memperluas properti animasi di kedua arah
Contoh berikut memungkinkan elemen <div> mempertahankan nilai gaya dari bingkai utama terakhir saat animasi berakhir:
Contoh
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
Contoh berikut memungkinkan elemen <div> mendapatkan nilai gaya yang ditetapkan oleh bingkai utama pertama sebelum animasi dimulai (selama periode penundaan animasi):
Contoh
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
Contoh berikut memungkinkan elemen <div> mendapatkan nilai gaya yang ditetapkan oleh bingkai utama pertama sebelum animasi dimulai, dan mempertahankan nilai gaya dari bingkai utama terakhir saat animasi berakhir:
Contoh
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Properti Singkatan Animasi
Contoh di bawah ini menggunakan enam properti animasi:
Contoh
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Efek animasi yang sama seperti di atas dapat dicapai dengan menggunakan
animation
properti steno:
Contoh
div
{
animation: example 5s linear 2s infinite alternate;
}
Properti Animasi CSS
Tabel berikut mencantumkan aturan @keyframes dan semua properti animasi CSS:
Property | Description |
---|---|
@keyframes | Specifies the animation code |
animation | A shorthand property for setting all the animation properties |
animation-delay | Specifies a delay for the start of an animation |
animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
animation-duration | Specifies how long time an animation should take to complete one cycle |
animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
animation-iteration-count | Specifies the number of times an animation should be played |
animation-name | Specifies the name of the @keyframes animation |
animation-play-state | Specifies whether the animation is running or paused |
animation-timing-function | Specifies the speed curve of the animation |