Animasi W3.CSS
Animasi itu Menyenangkan!
Kelas Animasi W3.CSS
W3.CSS menyediakan kelas animasi berikut:
| Kelas | Mendefinisikan |
|---|---|
| w3-animasi-atas | Meluncur dalam elemen dari atas (-300px hingga 0) |
| w3-animate-bottom | Meluncur dalam elemen dari bawah (-300px hingga 0) |
| w3-animasi-kiri | Meluncur dalam elemen dari kiri (-300px hingga 0) |
| w3-animasi-kanan | Meluncur dalam elemen dari kanan (-300px hingga 0) |
| w3-animate-opacity | Menganimasikan opasitas elemen dari 0 hingga 1 dalam 0,8 detik |
| w3-animate-zoom | Menganimasikan elemen dari ukuran 0 hingga 100% |
| w3-animate-memudar | Menganimasikan opacity elemen dari 0 hingga 1 dan 1 hingga 0 (fade in + fade out) |
| w3-spin | Memutar elemen 360 derajat |
Animasi Atas
Kelas w3-animate-top meluncur dalam elemen dari atas (dari -300px ke 0):
Contoh
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Animasi Bawah
Kelas w3-animate-bottom meluncur dalam elemen dari bawah (dari -300px ke 0):
Contoh
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Animasi Kiri
Kelas w3-animate-left meluncur dalam elemen dari kiri (-300px ke 0):
Contoh
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Animasikan Kanan
Kelas w3-animate-right meluncur dalam elemen dari kanan (-300px ke 0):
Contoh
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Memudar di Elemen
Kelas w3-animate-opacity menganimasikan opacity elemen dari 0 hingga 1 dalam 0,8 detik.
Fade dalam elemen dengan kelas w3-animate-opacity :
Contoh
<div class="w3-animate-opacity">..</div>
Perbesar Elemen
Kelas w3-animate-zoom menganimasikan elemen dari ukuran 0 hingga 100%.
Perbesar elemen dengan kelas w3-animate-zoom :
Contoh
<div class="w3-animate-zoom">..</div>
Elemen Putar
Kelas w3-spin memutar elemen 360 derajat:
Contoh
<div class="w3-spin">..</div>
Memudar Tak Terbatas
Kelas w3-animate-fading memudar masuk dan keluar elemen setiap 10 detik (terus menerus):
Menganimasikan Fade In dan Out
Contoh
<div class="w3-animate-fading">..</div>
Memudar Semua
Contoh
<img class="w3-animate-top" src="img_01.jpg">
<img class="w3-animate-zoom" src="img_02.jpg">
<img
class="w3-animate-left" src="img_03.jpg">
<img class="w3-animate-bottom" src="img_04.jpg">