Animasi di CSS: Cara Membuat dan Codenya

Section Artikel

1 Animasi CSS
2 Browser Pendukung
3 Apa itu Animasi CSS?
4 Aturan @keyframes
5 Animasi Delay
6 Mengatur Berapa Kali Animasi Harus Berjalan
7 Jalankan Animasi dalam Arah Terbalik atau Siklus Alternatif
8 Tentukan Kurva Kecepatan Animasi
9 Tentukan mode isian Untuk Animasi
10 Properti Singkatan Animasi
11 Properti Animasi CSS

Animasi CSS

Properti CSS memungkinkan animasi elemen HTML tanpa menggunakan JavaScript atau Flash!

Berikut ini properti animasi CSS yang akan kita pelajari :

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

Browser Pendukung

Property	Google Chrome	Microsoft Edge	Mozila 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 memungkinkan elemen secara bertahap berubah dari satu gaya ke gaya lainnya. Kita bisa mengubah properti CSS sebanyak yang kita inginkan.

Untuk menggunakan animasi CSS, kita harus terlebih dahulu menentukan beberapa keyframe utama untuk animasi tersebut.

Keyframe dapat menahan gaya apa yang akan dimiliki elemen pada waktu-waktu tertentu.

Aturan @keyframes

Untuk menentukan gaya CSS di dalam aturan @keyframes, animasi secara bertahap akan berubah dari gaya saat ini ke gaya baru pada waktu tertentu. Agar animasi berfungsi, kita harus mengikat animasi ke elemen.

Contoh berikut mengikat animasi “contoh” ke elemen . Animasi akan berlangsung selama 4 detik dan secara bertahap akan mengubah warna latar belakang elemen 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;
}

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p><b>Note:</b> Saat animasi selesai, animasi berubah kembali ke gaya aslinya.</p>

</body>
</html>

Catatan: Properti durasi animasi menentukan berapa lama waktu yang dibutuhkan untuk menyelesaikan animasi. Jika properti animasi-durasi tidak ditentukan animasi tidak akan terjadi, karena nilai defaultnya adalah 0s (0 detik).

Dalam contoh di atas kita telah menentukan kapan gaya akan berubah dengan menggunakan kata kunci “from” dan “to” (yang mewakili 0% (mulai) dan 100% (selesai)).

Mungkin juga menggunakan persen. Dengan menggunakan persen, kita bisa menambahkan perubahan gaya sebanyak yang Anda suka.

Contoh berikut akan mengubah warna latar belakang elemen saat animasinya sudah 25% selesai, 50% selesai, dan sekali lagi saat animasinya 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;
}

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Contoh berikut akan mengubah warna latar belakang dan posisi elemen saat animasi sudah 25% selesai, 50% selesai dan sekali lagi saat animasi sudah 100% selesai:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@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;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Animasi Delay

Properti animation-delay menentukan penundaan untuk memulai animasi.

Contoh berikut memiliki jeda 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;
}

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

@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;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Nilai negatif juga diperbolehkan. Jika menggunakan nilai negatif, animasi akan dimulai seolah-olah telah diputar selama N detik.

Dalam contoh berikut, animasi akan dimulai seolah-olah telah diputar selama 2 detik:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

@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;}
}
</style>
</head>
<body>

<p>Jika menggunakan nilai negatif, animasi akan dimulai seolah-olah telah diputar selama N detik</p>

<div></div>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Mengatur Berapa Kali Animasi Harus Berjalan

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

@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;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Contoh berikut menggunakan nilai “infinite” untuk membuat animasi berlanjut:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@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;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Jalankan Animasi dalam Arah Terbalik atau Siklus Alternatif

Properti animation-direction dapat menentukan apakah animasi harus dimainkan maju, mundur, atau dalam siklus alternatif.

Properti animation-direction dapat memiliki nilai berikut:

normal – Animasi diputar seperti biasa (maju). Ini default
reverse – Animasi dimainkan dalam arah sebaliknya (mundur)
alternatif – Animasi dimainkan maju dulu, lalu mundur
alternate-reverse – Animasi diputar mundur terlebih dahulu, kemudian 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;
}

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;  
}

@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;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Contoh berikut menggunakan nilai “alternatif” agar animasi berjalan maju terlebih dahulu, lalu mundur(alternatif),

Contoh :

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

@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;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Contoh berikut menggunakan nilai “alternatif-reverse” untuk membuat animasi berjalan mundur terlebih dahulu, lalu maju:

Contoh

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;  
}

@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;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Tentukan Kurva Kecepatan Animasi

Properti animation-timing-function dapat menentukan kurva kecepatan animasi.

Properti animasi-timing-function memiliki beberapa nilai berikut:

ease – Menentukan animasi dengan awal yang lambat, lalu cepat, lalu akhiri dengan lambat (ini default)
linear – Menentukan animasi dengan kecepatan yang sama dari awal hingga akhir
ease-in – Menentukan animasi dengan awal yang lambat
ease-out – Menentukan animasi dengan akhir yang lambat
easy-in-out – Menentukan animasi dengan awal dan akhir yang lambat
kubik-bezier (n, n, n, n) – Memungkinkan kita untuk menentukan nilai 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;}

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s infinite;
}

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

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<p><strong>Note:</strong> Properti animasi-timing-function tidak didukung di Internet Explorer 9 dan versi sebelumnya.</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

Tentukan mode isian Untuk Animasi

Animasi CSS tidak memengaruhi elemen sebelum keyframe pertama dimainkan atau setelah keyframe terakhir dimainkan. Properti mode isian animasi dapat mengganti perilaku ini.

Properti mode isian animasi berfungsi untuk menentukan gaya untuk elemen target saat animasi tidak diputar (sebelum dimulai, setelah berakhir, atau keduanya).

Properti mode isian animasi dapat memiliki nilai berikut:

none – Nilai default. Animasi tidak akan menerapkan gaya apa pun ke elemen sebelum atau sesudah dieksekusi
forwards– Elemen akan mempertahankan nilai gaya yang ditetapkan oleh bingkai utama terakhir (bergantung pada animasi-arah dan animasi-iterasi-hitungan)
backwards – Elemen akan mendapatkan nilai gaya yang ditetapkan oleh bingkai utama pertama (bergantung pada arah animasi), dan mempertahankannya selama periode penundaan animasi
both– Animasi akan mengikuti aturan untuk maju dan mundur, memperluas properti animasi di kedua arah.

Contoh berikut memungkinkan elemen mempertahankan nilai gaya dari keyframe terakhir saat animasi berakhir,

Contoh :

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<p>Biarkan elemen div mempertahankan nilai gaya dari keyframe terakhir saat animasi berakhir:</p>

<div></div>

<p><strong>Note:</strong> The animation-fill-mode property is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Contoh berikut memungkinkan elemen mendapatkan nilai gaya yang disetel oleh bingkai utama pertama sebelum animasi dimulai (selama periode penundaan animasi):

Contoh :

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px;}
}
</style>
</head>
<body>

<p>Biarkan elemen div mendapatkan nilai gaya yang disetel oleh keyframe pertama sebelum animasi dimulai (selama periode animasi delay):</p>

<div></div>

<p><strong>Note:</strong> The animation-fill-mode property is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Contoh berikut memungkinkan elemen mendapatkan nilai gaya yang disetel oleh keyframe pertama sebelum animasi dimulai, dan mempertahankan nilai gaya dari keyframe terakhir saat animasi berakhir:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<p>Biarkan elemen div mendapatkan nilai gaya yang disetel oleh bingkai utama pertama sebelum animasi dimulai, dan pertahankan nilai gaya dari bingkai utama terakhir saat animasi berakhir:</p>

<div></div>

<p><strong>Note:</strong> The animation-fill-mode property is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@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;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Efek animasi yang sama seperti di atas dapat dicapai dengan menggunakan properti animasi singkatan:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst {
  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;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Properti Animasi CSS

Tabel berikut mencantumkan aturan @keyframes dan semua properti animasi CSS:

Property	Deskripsi
@keyframes	Menentukan kode animasi
animation	Properti singkatan untuk menyetel semua properti animasi
animation-delay	Menentukan penundaan untuk memulai animasi
animation-direction	Menentukan apakah animasi harus dimainkan maju, mundur atau dalam siklus alternatif
animation-duration	Menentukan berapa lama waktu yang dibutuhkan animasi untuk menyelesaikan satu siklus
animation-fill-mode	Menentukan gaya untuk elemen saat animasi tidak diputar (sebelum dimulai, setelah berakhir, atau keduanya)
animation-iteration-count	Menentukan berapa kali animasi harus dimainkan
animation-name	Menentukan nama animasi @keyframes
animation-play-state	Menentukan apakah animasi sedang berjalan atau dijeda
animation-timing-function	Menentukan kurva kecepatan animasi

animasi CSS

Animasi di CSS: Cara Membuat dan Codenya

Browser Pendukung

Apa itu Animasi CSS?

Aturan @keyframes

Animasi Delay

Mengatur Berapa Kali Animasi Harus Berjalan

Jalankan Animasi dalam Arah Terbalik atau Siklus Alternatif

Tentukan Kurva Kecepatan Animasi

Tentukan mode isian Untuk Animasi

Properti Singkatan Animasi

Properti Animasi CSS

Transisi di CSS: Cara Membuat dan Codenya

Button di CSS: Cara Membuat dan Code Sintaknya

You may also like