Animaciones W3.CSS

Posted on by Rudeus Greyrat

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *