Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Animasi CSS


Animasi CSS

CSS memungkinkan animasi elemen HTML tanpa menggunakan JavaScript atau Flash!

CSS

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-durationmenentukan berapa lama waktu yang dibutuhkan untuk menyelesaikan animasi. Jika animation-durationproperti 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-delaymenentukan 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-countmenentukan 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-directionmenentukan 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 default
  • reverse- Animasi diputar dalam arah terbalik (mundur)
  • alternate - Animasi diputar ke depan dulu, lalu ke belakang
  • alternate-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-functionmenentukan 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 akhir
  • ease-in - Menentukan animasi dengan awal yang lambat
  • ease-out - Menentukan animasi dengan akhir yang lambat
  • ease-in-out - Menentukan animasi dengan awal dan akhir yang lambat
  • cubic-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-modemenentukan 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 dieksekusi
  • forwards- 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 animasi
  • both- 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 animationproperti steno:

Contoh

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

Uji Diri Anda Dengan Latihan

Olahraga:

Tambahkan animasi 2 detik untuk elemen <div>, yang mengubah warna dari merah menjadi biru. Panggil animasi "contoh".

<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: ;
  : 2s;
}

@keyframes example {
  from {: red;}
  to {: blue;}
}
</style>

<body>
  <div>This is a div</div>
</body>


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