Animations W3.CSS
Cours d'animation W3.CSS
W3.CSS fournit les classes suivantes pour les animations :
| Classer | Définit |
|---|---|
| w3-animate-top | Glisse dans un élément à partir du haut (-300px à 0) |
| w3-animer-bas | Glisse dans un élément par le bas (-300px à 0) |
| w3-animer-gauche | Glisse dans un élément à partir de la gauche (-300px à 0) |
| w3-animate-right | Glisse dans un élément depuis la droite (-300px à 0) |
| w3-animation-opacité | Anime l'opacité d'un élément de 0 à 1 en 0,8 seconde |
| w3-animation-zoom | Anime un élément de 0 à 100% en taille |
| w3-animate-fading | Anime l'opacité d'un élément de 0 à 1 et de 1 à 0 (fondus entrants + fondus sortants) |
| w3-tour | Fait tourner un élément à 360 degrés |
Haut animé
La classe w3-animate-top glisse dans un élément par le haut (de -300px à 0) :
Exemple
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Animer le bas
La classe w3-animate-bottom glisse dans un élément depuis le bas (de -300px à 0) :
Exemple
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Animer à gauche
La classe w3-animate-left glisse dans un élément de gauche (-300px à 0) :
Exemple
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Animer à droite
La classe w3-animate-right glisse dans un élément depuis la droite (-300px à 0) :
Exemple
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Fondu dans les éléments
La classe w3-animate-opacity anime l'opacité d'un élément de 0 à 1 en 0,8 seconde.
Fondu dans un élément avec la classe w3-animate-opacity :
Exemple
<div class="w3-animate-opacity">..</div>
Zoom sur les éléments
La classe w3-animate-zoom anime un élément de 0 à 100% en taille.
Zoomez sur un élément avec la classe w3-animate-zoom :
Exemple
<div class="w3-animate-zoom">..</div>
Éléments de rotation
La classe w3-spin fait tourner un élément à 360 degrés :
Exemple
<div class="w3-spin">..</div>
Décoloration infinie
La classe w3-animate-fading fait apparaître et disparaître un élément toutes les 10 secondes (en continu) :
Animation de fondu entrant et sortant
Exemple
<div class="w3-animate-fading">..</div>
Estomper tout
Exemple
<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">