Animasi CSS

Animasi CSS

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

CSS

Dalam bab ini, Anda akan belajar seperti berikut properti:

  • @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 menunjukkan 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 secara perlahan dari gaya satu ke gaya lain.

Anda dapat merubah berbagai 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.

aturan @keyframes

Jika Anda dalam @keyframes Aturan menentukan gaya CSS yang akan berubah secara gradual 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 berlanjut 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 selesai 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 perubahan gaya sesuai 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;}
}
/* Elemen 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;}
}
/* Elemen 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 memulai 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

Setel 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 menjalankan animasi selamanya:

Contoh

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

Coba sendiri

Mengalirkan animasi ke belakang atau berulang-ulang

animation-direction Atribut menentukan apakah animasi dimainkan ke depan, ke belakang, atau berulang-ulang

animation-direction Atribut dapat menerima nilai berikut:

  • normal - Animasi dimainkan normal (ke depan). Nilai standar
  • 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 kurva kecepatan animasi

animation-timing-function Atribut menentukan kurva kecepatan animasi.

animation-timing-function Atribut dapat menerima nilai berikut:

  • ease - Tentukan animasi yang mulai lambat, kemudian mempercepat, dan kemudian berhenti lambat (standar)
  • linear - Tentukan animasi yang memiliki kecepatan yang sama dari awal hingga akhir
  • ease-in - Tentukan animasi yang mulai lambat
  • ease-out - Tentukan animasi yang berakhir lambat
  • ease-in-out - Tentukan animasi yang mulai dan berakhir lambat
  • cubic-bezier(n,n,n,n) - Jalankan nilai yang Anda definisi di fungsi kubik Bezier tiga kali

Contoh di bawah ini menunjukkan beberapa kurva 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 atribut dapat menge覆这种行为.

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

Atribut animation-fill-mode dapat menerima nilai berikut:

  • none - Nilai standar. 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 secara bersamaan, sehingga ekspandir gaya atribut animasi di kedua arah.

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

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 ditetapkan di keyframe pertama sebelum awal 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 ditetapkan di keyframe pertama sebelum awal animasi, serta mempertahankan nilai gaya yang ditetapkan di keyframe terakhir 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 dimulainya animasi.
animation-direction Tentukan apakah animasi akan dimainkan ke depan, ke belakang, atau bergantian.
animation-duration Tentukan waktu yang dihabiskan untuk setiap periode animasi selesai.
animation-fill-mode Tentukan gaya yang digunakan saat elemen tidak memainkan animasi (sebelum dimulai, setelah berakhir, atau keduanya).
animation-iteration-count Tentukan jumlah kali animasi yang akan diputar.
animation-name Tentukan nama animasi @keyframes.
animation-play-state Tentukan apakah animasi berjalan atau dihentikan.
animation-timing-function Tentukan garis lurus animasi.