Animações W3.CSS
Classes de animação W3.CSS
W3.CSS fornece as seguintes classes para animações:
| Classe | Define |
|---|---|
| w3-animate-top | Slides em um elemento da parte superior (-300px a 0) |
| w3-animate-bottom | Slides em um elemento da parte inferior (-300px a 0) |
| w3-animate-esquerda | Slides em um elemento da esquerda (-300px a 0) |
| w3-animate-right | Slides em um elemento da direita (-300px a 0) |
| w3-animate-opacity | Anima a opacidade de um elemento de 0 a 1 em 0,8 segundos |
| w3-animar-zoom | Anima um elemento de 0 a 100% de tamanho |
| w3-animate-fading | Anima a opacidade de um elemento de 0 a 1 e 1 a 0 (fade in + fade out) |
| w3-giro | Gira um elemento 360 graus |
Animar parte superior
A classe w3-animate-top desliza em um elemento do topo (de -300px a 0):
Exemplo
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Animar fundo
A classe w3-animate-bottom desliza em um elemento da parte inferior (de -300px a 0):
Exemplo
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Animar à esquerda
A classe w3-animate-left desliza em um elemento da esquerda (-300px para 0):
Exemplo
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Animar direito
A classe w3-animate-right desliza em um elemento da direita (-300px para 0):
Exemplo
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Fade em elementos
A classe w3-animate-opacity anima a opacidade de um elemento de 0 a 1 em 0,8 segundos.
Fade em um elemento com a classe w3-animate-opacity :
Exemplo
<div class="w3-animate-opacity">..</div>
Zoom nos elementos
A classe w3-animate-zoom anima um elemento de 0 a 100% de tamanho.
Amplie um elemento com a classe w3-animate-zoom :
Exemplo
<div class="w3-animate-zoom">..</div>
Elementos de rotação
A classe w3-spin gira um elemento em 360 graus:
Exemplo
<div class="w3-spin">..</div>
Desvanecimento Infinito
A classe w3-animate-fading faz fade in e out de um elemento a cada 10 segundos (continuamente):
Animar Fade In e Out
Exemplo
<div class="w3-animate-fading">..</div>
Desaparecer tudo
Exemplo
<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">