Animasikan CSS

Animasikan CSS

CSS dapat menciptakan efek animasi elemen HTML tanpa menggunakan JavaScript atau Flash!

CSS

Dalam bab ini, Anda akan belajar tentang properti 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 di tabel menandai versi pertama browser yang mendukung properti ini penuh.

Atribut Chrome IE Firefox Safari Opera
@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 membuat elemen berubah gaya secara perlahan dari satu gaya ke yang lain.

Anda dapat merubah berbagai macam properti CSS dengan bebas.

Untuk menggunakan animasi CSS, Anda harus pertama-tama menentukan beberapa kunci frame untuk animasi.

Kunci frame mengandung gaya yang dimiliki elemen di waktu tertentu.

@keyframes aturan

Jika Anda di @keyframes Aturan menentukan gaya CSS yang akan berubah secara perlahan dari gaya saat ini ke gaya baru di waktu tertentu.

Untuk membuat animasi berlaku, Anda harus mengikat animasi ke suatu elemen.

Contoh di bawah ini akan mengikat animasi "example" ke elemen <div>. Animasi akan berlangsung selama 4 detik, sambil mengubah warna latar belakang elemen <div> dari "red" hingga "yellow":

Contoh

/* Kode animasi */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* Aplikasikan efek animasi ke elemen ini */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Coba Sendiri

Perhatian:animation-duration Properti menentukan berapa lama waktu yang dibutuhkan untuk menyelesaikan animasi. Jika tidak disebutkan animation-duration Jika tidak ada properti, animasi tidak akan terjadi karena nilai default adalah 0s (0 detik).

Dalam contoh di atas, dengan menggunakan kata kunci "from" dan "to" (mewakili 0% (mulai) dan 100% (selesai)), kami menetapkan kapan gaya berubah.

Anda juga dapat menggunakan nilai persen. Dengan menggunakan persen, Anda dapat menambahkan berbagai macam perubahan gaya sesuai dengan kebutuhan.

Contoh di bawah ini akan mengubah warna latar belakang elemen <div> saat animasi selesai 25%, selesai 50%, dan animasi selesai 100%:

Contoh

/* Kode animasi */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Element yang menerapkan animasi */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Coba Sendiri

Contoh di bawah ini akan mengubah warna latar dan posisi elemen <div> saat animasi selesai 25%, selesai 50%, dan animasi selesai 100%:

Contoh

/* Kode animasi */
@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;}
}
/* Element yang menerapkan animasi */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Coba Sendiri

Jeda animasi

animation-delay Atribut menentukan waktu jeda sebelum animasi dimulai.

Contoh di bawah ini memiliki 2 detik jeda sebelum mulai animasi:

Contoh

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Coba Sendiri

Nilai negatif juga diizinkan. Jika menggunakan nilai negatif, animasi akan dimulai seperti jika telah dimainkan selama N detik.

Dalam contoh di bawah ini, animasi akan dimulai seperti jika telah dimainkan selama 2 detik:

Contoh

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Coba Sendiri

Atur berapa kali animasi harus dijalankan

animation-iteration-count Atribut menentukan berapa kali animasi harus dijalankan.

Contoh di bawah ini 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;
}

Coba Sendiri

Contoh di bawah ini 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;
}

Coba Sendiri

Menggerakkan animasi ke belakang atau alternatif

animation-direction Atribut menentukan apakah animasi dimainkan ke depan, ke belakang, atau dimainkan secara alternatif.

animation-direction Properti dapat menerima nilai berikut:

  • normal - Animasi dimainkan normal (ke depan). Nilai default
  • reverse - Animasi dimainkan dengan arah yang berlawanan (ke belakang)
  • alternate - Animasi dimainkan terlebih dahulu ke depan, lalu ke belakang
  • alternate-reverse - Animasi dimainkan terlebih dahulu ke belakang, lalu ke depan

Contoh di bawah ini akan menjalankan animasi dengan arah yang berlawanan (ke belakang):

Contoh

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Coba Sendiri

Contoh di bawah ini menggunakan nilai "alternate" untuk menjalankan animasi terlebih dahulu ke depan, lalu ke belakang:

Contoh

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Coba Sendiri

Contoh di bawah ini menggunakan nilai "alternate-reverse" untuk menjalankan animasi terlebih dahulu ke belakang, lalu ke depan:

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;
}

Coba Sendiri

Tentukan garis kecepatan animasi

animation-timing-function Properti menentukan garis kecepatan animasi.

animation-timing-function Properti dapat menerima nilai berikut:

  • ease - Tentukan animasi yang mulai lambat, kemudian meningkat, dan akhirnya lambat kembali (default).
  • linear - Tentukan animasi yang memiliki kecepatan yang sama dari awal hingga akhir.
  • ease-in - Tentukan animasi yang lambat untuk awal.
  • ease-out - Tentukan animasi yang lambat untuk akhir.
  • ease-in-out - Tentukan animasi yang lebih lambat untuk awal dan akhir.
  • cubic-bezier(n,n,n,n) - Jalankan nilai yang Anda tentukan sendiri di tiga fungsi Bezier.

Contoh di bawah ini menunjukkan berbagai garis kecepatan 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;}

Coba Sendiri

Tentukan mode pengisi animasi

Animasi CSS tidak akan mempengaruhi elemen sebelum frame kunci pertama dimainkan atau setelah frame kunci terakhir dimainkan.animation-fill-mode properti dapat menutupi perilaku ini.

Pada saat animasi tidak dimainkan (sebelum dimulai, setelah selesai, atau keduanya selesai),animation-fill-mode Properti menentukan gaya elemen target.

Properti animation-fill-mode dapat menerima nilai berikut:

  • none - Nilai default. Animasi tidak akan menerapkan gaya apapun pada elemen sebelum atau setelah eksekusi.
  • forwards - Elemen akan mempertahankan nilai gaya yang diatur di frame kunci terakhir (tergantung animation-direction dan animation-iteration-count).
  • backwards - Elemen akan mendapatkan nilai gaya yang diatur di frame kunci pertama (tergantung animation-direction) dan mempertahankan nilai ini selama periode delay animasi.
  • both - Animasi akan mengikuti aturan ke depan dan ke belakang sekaligus, sehingga ekspandir atribut animasi di kedua arah.

Contoh di bawah ini menunjukkan bagaimana elemen <div> mempertahankan nilai gaya dari frame kunci terakhir setelah animasi berakhir:

Contoh

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Coba Sendiri

Contoh di bawah ini membuat elemen <div> mendapatkan nilai gaya yang diset di frame kunci pertama sebelum mulai animasi (dalam periode jeda animasi):

Contoh

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Coba Sendiri

Contoh di bawah ini membuat elemen <div> mendapatkan nilai gaya yang diset di frame kunci pertama sebelum mulai animasi, serta mempertahankan nilai gaya terakhir di frame kunci saat animasi selesai:

Contoh

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Coba Sendiri

Atribut Singkat Animasi

Contoh di bawah ini menggunakan enam atribut animasi:

Contoh

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Coba Sendiri

Gunakan singkatan animation Atribut juga dapat menciptakan efek animasi yang sama seperti contoh di atas:

Contoh

div {
  animation: example 5s linear 2s infinite alternate;
}

Coba Sendiri

Atribut Animasi CSS

Tabel di bawah ini menampilkan aturan @keyframes dan semua atribut animasi CSS:

Atribut Deskripsi
@keyframes Tentukan mode animasi.
animation Atur atribut singkat untuk semua atribut animasi.
animation-delay Tentukan jeda mulai animasi.
animation-direction Tentukan apakah animasi akan bermain ke depan, ke belakang, atau bergantian.
animation-duration Tentukan waktu yang dihabiskan untuk setiap siklus animasi.
animation-fill-mode Tentukan gaya penampilan elemen saat animasi tidak dimainkan (di awal, di akhir, atau keduanya).
animation-iteration-count Tentukan jumlah kali animasi yang akan dimainkan.
animation-name Tentukan nama animasi @keyframes.
animation-play-state Menentukan apakah animasi berjalan atau berhenti.
animation-timing-function Menentukan garis lurus animasi.