Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende ¿Qué Son las Animaciones CSS? | Animaciones Avanzadas en CSS
Técnicas Avanzadas de CSS

book¿Qué Son las Animaciones CSS?

Las animaciones pueden crear efectos complejos y dinámicos para mejorar la experiencia interactiva del usuario. Las animaciones no requieren un evento desencadenante específico y pueden configurarse para repetirse infinitamente. Además, las animaciones pueden tener múltiples estados intermedios entre el estado inicial y el final, lo que proporciona mayor flexibilidad y control sobre los efectos visuales producidos.

Crear animación

Se pueden crear animaciones utilizando la regla @keyframes, que define un conjunto de estilos CSS en varios puntos de una animación. Además, se asigna un nombre a la animación. Este debe ser descriptivo, es decir, indicar el tipo de animación.

@keyframes AnimationName {
 /* Styles at various points (at least initial and final) */ 
}

Para determinar el cambio de propiedades en un punto específico en el tiempo, se pueden utilizar las palabras clave: from (0%) y to (100%). Con mayor frecuencia, se emplean valores porcentuales.

@keyframes AnimationName {
  0% {
    /* Properties to be changed */
  }

  10% {
    /* Properties to be changed */
  }

  30% {
    /* Properties to be changed */
  }

  /* As many as we need */
  
  100% {
    /* Properties to be changed */
  }
}

Una vez declarada la animación, se puede utilizar el nombre de los keyframes como valor para la propiedad animation-name en varios elementos. Otra ventaja de las animaciones es que pueden aplicarse repetidamente a múltiples elementos.

selector {
  animation-name: AnimationName;
}

Práctica

Agreguemos animación al elemento div. La tarea consiste en cambiar la propiedad background-color con el tiempo. El estado inicial será green, luego al 60% debe ser red, y en el estado final, debe ser blue. Además, se especificará la propiedad animation-duration para observar la animación en funcionamiento.

index.html

index.html

index.css

index.css

copy
question mark

¿Qué permite hacer la regla @keyframes?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 1

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you show me how to write the CSS for this animation?

What does the complete code look like for animating the div's background color?

How do I apply this animation to multiple elements?

Awesome!

Completion rate improved to 2.04

book¿Qué Son las Animaciones CSS?

Desliza para mostrar el menú

Las animaciones pueden crear efectos complejos y dinámicos para mejorar la experiencia interactiva del usuario. Las animaciones no requieren un evento desencadenante específico y pueden configurarse para repetirse infinitamente. Además, las animaciones pueden tener múltiples estados intermedios entre el estado inicial y el final, lo que proporciona mayor flexibilidad y control sobre los efectos visuales producidos.

Crear animación

Se pueden crear animaciones utilizando la regla @keyframes, que define un conjunto de estilos CSS en varios puntos de una animación. Además, se asigna un nombre a la animación. Este debe ser descriptivo, es decir, indicar el tipo de animación.

@keyframes AnimationName {
 /* Styles at various points (at least initial and final) */ 
}

Para determinar el cambio de propiedades en un punto específico en el tiempo, se pueden utilizar las palabras clave: from (0%) y to (100%). Con mayor frecuencia, se emplean valores porcentuales.

@keyframes AnimationName {
  0% {
    /* Properties to be changed */
  }

  10% {
    /* Properties to be changed */
  }

  30% {
    /* Properties to be changed */
  }

  /* As many as we need */
  
  100% {
    /* Properties to be changed */
  }
}

Una vez declarada la animación, se puede utilizar el nombre de los keyframes como valor para la propiedad animation-name en varios elementos. Otra ventaja de las animaciones es que pueden aplicarse repetidamente a múltiples elementos.

selector {
  animation-name: AnimationName;
}

Práctica

Agreguemos animación al elemento div. La tarea consiste en cambiar la propiedad background-color con el tiempo. El estado inicial será green, luego al 60% debe ser red, y en el estado final, debe ser blue. Además, se especificará la propiedad animation-duration para observar la animación en funcionamiento.

index.html

index.html

index.css

index.css

copy
question mark

¿Qué permite hacer la regla @keyframes?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 1
some-alt