CSS3 Animasi
Animasi CSS3 memungkinkan animasi menggunakan elemen HTML tanpa menggunakan JavaScript atau Flash!
Apa CSS3 Animasi?
Animasi memungkinkan elemen secara bertahap berubah dari satu gaya 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.
Aturankeyframes
Ketika Anda menentukan gaya CSS dalam aturankeyframes, animasi secara bertahap akan berubah dari gaya saat ke gaya baru pada waktu tertentu.
Untuk mendapatkan animasibekerja, Anda harus mengikat animasi untuk elemen.
Contoh animasi dengan elemen <div>. Animasi akan berlangsung selama 4 detik, dan secara bertahap akan mengubah background-warna <div> elemen dari "merah" ke "kuning":
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: contoh; /* Chrome, Safari, Opera */
-webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
animation-name: contoh;
animation-duration: 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes contoh {
from {background-color: red;}
to {background-color: yellow;}
}
@keyframes contoh {
from {background-color: red;}
to {background-color: yellow;}
}
Catatan: Jika properti animasi-durasi tidak ditentukan, animasi tidak akan berpengaruh, karena nilai default adalah 0.
Dalam contoh di atas telah kita ditentukan ketika gaya akan berubah dengan menggunakan kata kunci "from" dan "to" (yang mewakili 0% (mulai) dan 100% (selesai)).
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:
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: contoh; /* Chrome, Safari, Opera */
-webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
animation-name: contoh;
animation-duration: 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes contoh {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: black;}
}
/* Standard syntax */
@keyframes contoh {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: black;}
}
Contoh berikut akan mengubah baik latar belakang warna dan posisi <div> elemen ketika animasi adalah 25% selesai, 50% selesai, dan lagi ketika animasi adalah 100% selesai:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
-webkit-animation-name: contoh; /* Chrome, Safari, Opera */
-webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
animation-name: contoh;
animation-duration: 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes contoh {
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: black; left: 0px; top: 200px;}
100% {background-color: red; left: 0px; top: 0px;}
}
/* Standard syntax */
@keyframes contoh {
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: black; left: 0px; top: 200px;}
100% {background-color: red; left: 0px; top: 0px;}
}
Menunda sebuah Animasi
Animasi-delay properti menetapkan penundaan untuk memulai animasi.
Contoh berikut memiliki delay 2 detik sebelum memulai animasi:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
-webkit-animation-name: contoh; /* Chrome, Safari, Opera */
-webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-name: contoh;
animation-duration: 5s;
animation-delay: 2s;
}
Set Berapa Banyak Times, sebuah Animasi Harus Jalankan
Properti animation-iteration-count menentukan berapa kali animasi harus dijalankan.
Contoh berikut akan menjalankan animasi 3 kali sebelum berhenti:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
-webkit-animation-name: contoh; /* Chrome, Safari, Opera */
-webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
animation-name: contoh;
animation-duration: 5s;
animation-iteration-count: 3;
}
Contoh berikut menggunakan nilai "tak terbatas" untuk membuat animasi terus selama-lamanya:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
-webkit-animation-name: contoh; /* Chrome, Safari, Opera */
-webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
animation-name: contoh;
animation-duration: 5s;
animation-iteration-count: infinite;
}
Jalankan Animasi Reverse atau Alternate
Properti animation-direction digunakan untuk membiarkan lari animasi di arah sebaliknya atau siklus alternatif.
Contoh berikut akan menjalankan animasi di arah sebaliknya:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
-webkit-animation-name: contoh; /* Chrome, Safari, Opera */
-webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-name: contoh;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: reverse;
}
Contoh berikut menggunakan nilai "alternate" untuk membuat animasi pertama berjalan ke depan, lalu ke belakang, kemudian ke depan:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
-webkit-animation-name: contoh; /* Chrome, Safari, Opera */
-webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
-webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
animation-name: contoh;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Tentukan Curve Kecepatan Animasi
Properti animation-timing-function menentukan kurva kecepatan animasi.
Properti animation-timing-function dapat memiliki nilai berikut:
- ease - menentukan animasi dengan awal yang lambat, kemudian cepat, kemudian berakhir perlahan (ini adalah default)
- linear - menentukan 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-nilai Anda sendiri dalam fungsi kubik-bezier
Contoh berikut menunjukkan beberapa kurva kecepatan yang berbeda yang dapat digunakan:
/* Chrome, Safari, Opera */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
/* Standard syntax */
#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;}
Animasi Singkatan Properti
Contoh di bawah ini menggunakan enam sifat animasi:
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 properti animasi singkatan:
div {
animation: example 5s linear 2s infinite alternate;
}
0 komentar:
Posting Komentar