W3.CSS Animasyonları
Animasyon Eğlencelidir!
W3.CSS Animasyon Sınıfları
W3.CSS, animasyonlar için aşağıdaki sınıfları sağlar:
| Sınıf | tanımlar |
|---|---|
| w3-animate-top | Bir öğede üstten kayar (-300 pikselden 0'a) |
| w3-animate-alt | Bir öğede alttan kayar (-300 pikselden 0'a) |
| w3-animasyon-sol | Bir öğede soldan kayar (-300 pikselden 0'a) |
| w3-animasyon-sağ | Bir öğede sağdan kayar (-300 pikselden 0'a) |
| w3-animasyon-opaklık | Bir öğenin opaklığını 0,8 saniyede 0'dan 1'e canlandırır |
| w3-animasyon-yakınlaştırma | Bir öğeyi boyut olarak %0'dan %100'e kadar canlandırır |
| w3-animasyon-solma | Bir öğenin opaklığını 0'dan 1'e ve 1'den 0'a canlandırır (kararır + söner) |
| w3-spin | Bir elemanı 360 derece döndürür |
Üstü Canlandır
w3-animate-top sınıfı , bir öğede üstten kayar (-300 pikselden 0'a):
Örnek
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Alt Canlandır
w3-animate-bottom sınıfı , alttan bir öğede kayar (-300 pikselden 0'a):
Örnek
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Sola Animasyon Yap
w3-animate-left sınıfı , bir öğede soldan kayar (-300 pikselden 0'a):
Örnek
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Sağa Canlandır
w3-animate-right sınıfı , sağdan bir öğede kayar (-300px ila 0):
Örnek
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Elementlerde Solma
w3-animate-opacity sınıfı , bir öğenin opaklığını 0,8 saniyede 0'dan 1'e canlandırır.
w3-animate-opacity sınıfına sahip bir öğede fade :
Örnek
<div class="w3-animate-opacity">..</div>
Öğeleri Yakınlaştır
w3-animate-zoom sınıfı , bir öğeyi boyut olarak %0 ila %100 arasında canlandırır.
w3-animate-zoom sınıfıyla bir öğeyi yakınlaştırın:
Örnek
<div class="w3-animate-zoom">..</div>
Döndürme Elemanları
w3-spin sınıfı, bir öğeyi 360 derece döndürür :
Örnek
<div class="w3-spin">..</div>
Solan Sonsuz
w3-animate-fading sınıfı , her 10 saniyede bir (sürekli olarak) bir öğeye girip çıkar:
Animate Fade In ve Out
Örnek
<div class="w3-animate-fading">..</div>
Tümünü Soldur
Örnek
<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">