Curso IT Fundamentos CSS 027_Animación y Transición

Animación

Las animaciones CSS son efectos que se pueden usar para cambiar gradualmente los valores de las propiedades de los elementos. Las animaciones se pueden aplicar a cualquier propiedad CSS, incluyendo ancho, alto, color, fondo, borde, etc.

La sintaxis de la propiedad animation es la siguiente:

• name: Especifica el nombre de la animación.
• duration: Especifica la duración de la animación.
• timing-function: Especifica la curva de velocidad de la animación.
• delay: Especifica el retraso de la animación.
• iteration-count: Especifica el número de reproducciones de la animación.
• direction: Especifica la dirección de reproducción de la animación.
• fill-mode: Especifica el estilo del elemento después de completar la animación o cuando se pausa o detiene.

Ejemplo:

1
    @keyframes animationName{
2
    from {
3
        transform: rotate(0deg);
4
      }
5
      to {
6
        transform: rotate(360deg);
7
        }
8
    }
9
    .example1{
10
    width: 100px;
11
      height: 100px;
12
      background-color: #3498db;
13
      animation: animationName 2s linear infinite; /* Aplicar animación, duración 2 segundos, bucle infinito, transición lineal */
14
  }

1
    <div class="example1"></div>

Efecto:

• @keyframes rotate define una animación de fotogramas clave llamada rotate, que va del estado inicial (rotación de 0 grados) al estado final (rotación de 360 grados).
• El elemento .animated-box aplica esta animación, especificando el nombre de la animación, la duración, el tipo de bucle, etc. a través de la propiedad animation.

Las animaciones CSS y las transiciones CSS son efectos que pueden cambiar gradualmente los valores de las propiedades de los elementos. Las principales diferencias son:

• Las animaciones se pueden reproducir repetidamente, mientras que las transiciones solo se reproducen una vez.
• Las animaciones pueden especificar la dirección de reproducción, las transiciones no.
• Las animaciones pueden especificar el estilo del elemento después de completarse o al pausarse/detenerse, las transiciones no.

Transición

Las transiciones CSS son efectos que pueden cambiar gradualmente los valores de las propiedades de los elementos. Las transiciones se pueden aplicar a cualquier propiedad CSS, incluyendo ancho, alto, color, fondo, borde, etc. El efecto de transición puede variar según el navegador y el dispositivo, el rendimiento puede variar según la complejidad de la transición.

Ejemplo:

1
    .example1{
2
        width: 200px;
3
        height: 200px;
4
        background-color: #3498db;
5
        transition: background-color 0.5s ease; /* Definir propiedad y tiempo de transición */
6
        }
7
    .example1:hover{
8
        background-color: #e74c3c;
9
        }

1
    <div class="example1"></div>

Efecto: