CSS Animations es una técnica para cambiar la apariencia y el comportamiento de varios elementos en las páginas web. Se utiliza para controlar los elementos cambiando sus movimientos o visualización. W3.CSS proporciona a los desarrolladores algunas buenas clases de animación integradas. La lista de clases es la siguiente:
No Señor. |
Nombre de la clase |
Descripción |
---|---|---|
1. |
w3-animate-superior |
El elemento de destino parece deslizarse desde la parte superior. |
2. |
w3-animar-fondo |
El elemento de destino parece deslizarse desde la parte inferior. |
3. |
w3-animar-izquierda |
El elemento objetivo parece deslizarse desde la izquierda. |
4. |
w3-animar-derecha |
El elemento objetivo parece deslizarse desde la derecha. |
5. |
w3-animate-opacidad |
La opacidad del elemento objetivo cambia de 0 a 1 en 1,5 segundos. |
6. |
w3-animar-zoom |
El tamaño del elemento objetivo cambia de 0 a 100 % en 0,6 segundos. |
7. |
w3-animate-fading |
La opacidad del elemento objetivo sigue cambiando de 0 a 1 y luego vuelve a 0. |
8. |
giro w3 |
El ángulo del elemento objetivo con el eje sigue cambiando de 0 a 360 grados. |
Ejemplo 1: uso de la animación w3-animate-top en la página HTML.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-animate-top added animation to this division. --> <div class="w3-container w3-center w3-animate-top"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> </body> </html>
Producción:
Ejemplo 2: uso de la animación w3-animate-bottom en la página HTML.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-animate-bottom added animation to this division. --> <div class="w3-container w3-center w3-animate-bottom"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> </body> </html>
Producción:
Ejemplo 3: uso de la animación w3-animate-left en una página HTML.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-animate-left added animation to this division. --> <div class="w3-container w3-center w3-animate-left"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> </body> </html>
Producción:
Ejemplo 4: uso de la animación w3-animate-right en una página HTML.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-animate-right added animation to this division. --> <div class="w3-container w3-center w3-animate-right"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> </body> </html>
Producción:
Ejemplo 5: uso de la animación w3-animate-opacity en una página HTML.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-animate-opacity added animation to this division. --> <div class="w3-container w3-center w3-animate-opacity"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> </body> </html>
Producción:
Ejemplo 6: uso de la animación w3-animate-zoom en una página HTML.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-animate-zoom added animation to this division. --> <div class="w3-container w3-center w3-animate-zoom"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> </body> </html>
Producción:
Ejemplo 7: uso de la animación w3-animate-fading en una página HTML.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-animate-fading added animation to this division. --> <div class="w3-container w3-center w3-animate-fading"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> </body> </html>
Producción:
Ejemplo 8: uso de la animación w3-spin en una página HTML.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <!-- w3-spin added animation to this division. --> <div class="w3-container w3-center w3-spin"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA