W3.CSS- Animationen
W3.CSS-Animationsklassen
W3.CSS bietet die folgenden Klassen für Animationen:
| Klasse | Definiert |
|---|---|
| w3-animate-top | Fügt ein Element von oben ein (-300px bis 0) |
| w3-animieren-unten | Fügt ein Element von unten ein (-300px bis 0) |
| w3-animieren-links | Fügt ein Element von links ein (-300px bis 0) |
| w3-animieren-rechts | Fügt ein Element von rechts ein (-300px bis 0) |
| w3-animate-opacity | Animiert die Deckkraft eines Elements in 0,8 Sekunden von 0 auf 1 |
| w3-animieren-zoom | Animiert ein Element mit einer Größe von 0 bis 100 % |
| w3-animate-fading | Animiert die Deckkraft eines Elements von 0 auf 1 und 1 auf 0 (einblenden + ausblenden) |
| w3-Spin | Dreht ein Element um 360 Grad |
Oben animieren
Die Klasse w3-animate-top schiebt ein Element von oben ein (von -300px bis 0):
Beispiel
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Unten animieren
Die Klasse w3-animate-bottom schiebt ein Element von unten ein (von -300px bis 0):
Beispiel
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Links animieren
Die Klasse w3-animate-left schiebt ein Element von links ein (-300px bis 0):
Beispiel
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Richtig animieren
Die Klasse w3-animate-right schiebt ein Element von rechts ein (-300px bis 0):
Beispiel
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Elemente einblenden
Die Klasse w3-animate-opacity animiert die Deckkraft eines Elements in 0,8 Sekunden von 0 auf 1.
Blende ein Element mit der Klasse w3-animate-opacity ein:
Beispiel
<div class="w3-animate-opacity">..</div>
Vergrößern Sie Elemente
Die Klasse w3-animate-zoom animiert ein Element mit einer Größe von 0 bis 100 %.
Vergrößern Sie ein Element mit der Klasse w3-animate-zoom :
Beispiel
<div class="w3-animate-zoom">..</div>
Spin-Elemente
Die Klasse w3-spin dreht ein Element um 360 Grad:
Beispiel
<div class="w3-spin">..</div>
Unendlich verblassen
Die Klasse w3-animate-fading blendet alle 10 Sekunden (kontinuierlich) ein Element ein und aus:
Animiertes Ein- und Ausblenden
Beispiel
<div class="w3-animate-fading">..</div>
Alles verblassen
Beispiel
<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">