Animaciones W3.CSS
Clases de animación W3.CSS
W3.CSS proporciona las siguientes clases para animaciones:
| Clase | define |
|---|---|
| w3-animate-superior | Desliza en un elemento desde la parte superior (-300px a 0) |
| w3-animar-fondo | Desliza en un elemento desde la parte inferior (-300px a 0) |
| w3-animar-izquierda | Desliza en un elemento desde la izquierda (-300px a 0) |
| w3-animar-derecha | Desliza en un elemento desde la derecha (-300px a 0) |
| w3-animate-opacidad | Anima la opacidad de un elemento de 0 a 1 en 0,8 segundos |
| w3-animar-zoom | Anima un elemento de 0 a 100% de tamaño |
| w3-animate-fading | Anima la opacidad de un elemento de 0 a 1 y de 1 a 0 (se desvanece + se desvanece) |
| giro w3 | Gira un elemento 360 grados |
Animar parte superior
La clase w3-animate-top se desliza en un elemento desde la parte superior (de -300px a 0):
Ejemplo
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Animar fondo
La clase w3-animate-bottom se desliza en un elemento desde la parte inferior (de -300px a 0):
Ejemplo
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Animar a la izquierda
La clase w3-animate-left se desliza en un elemento desde la izquierda (-300px a 0):
Ejemplo
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Animar a la derecha
La clase w3-animate-right se desliza en un elemento desde la derecha (-300px a 0):
Ejemplo
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Fundido en elementos
La clase w3-animate-opacity anima la opacidad de un elemento de 0 a 1 en 0,8 segundos.
Fundido en un elemento con la clase w3-animate-opacity :
Ejemplo
<div class="w3-animate-opacity">..</div>
Ampliar elementos
La clase w3-animate-zoom anima un elemento de 0 a 100% de tamaño.
Haga zoom en un elemento con la clase w3-animate-zoom :
Ejemplo
<div class="w3-animate-zoom">..</div>
Elementos giratorios
La clase w3-spin gira un elemento 360 grados:
Ejemplo
<div class="w3-spin">..</div>
desvanecimiento infinito
La clase w3-animate-fading desvanece un elemento cada 10 segundos (continuamente):
Animar fundido de entrada y salida
Ejemplo
<div class="w3-animate-fading">..</div>
Desvanecer todo
Ejemplo
<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">