Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes:$249

Currency
$219/a帽o
Paga en 4 cuotas sin intereses
Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

22h

44m

22s

1

Como usar keyframes en CSS

隆Hola Platzi Team! 馃殌

Hoy quiero mostrar c贸mo puedes crear animaciones en CSS usando keyframes. Esto puede ayudarte a dar vida a tus sitios web y mejorar la experiencia del usuario. Vamos a ver c贸mo funciona paso a paso.

Primera parte.

馃Aprendiz

驴Qu茅 son las Keyframes en CSS?

Las keyframes son una caracter铆stica de CSS3 que nos permiten crear animaciones complejas y personalizadas definiendo varios estados de una animaci贸n y c贸mo se debe animar entre ellos.

Estructura b谩sica de una animaci贸n con keyframes

La estructura b谩sica de una animaci贸n con keyframes se ve as铆:

@keyframes nombreDeLaAnimacion {
  0% {
    /* Propiedades al inicio de la animaci贸n */
  }

  50% {
    /* Propiedades a la mitad de la animaci贸n */
  }

  100% {
    /* Propiedades al final de la animaci贸n */
  }
}

Segunda parte.

馃Profesional

C贸mo crear una animaci贸n con Keyframes

Vamos a crear una animaci贸n b谩sica que cambia el color de fondo de un div.

  1. Primero, define la animaci贸n con keyframes.
@keyframes cambioColor {
  0% {
    background-color: red;
  }

  50% {
    background-color: green;
  }

  100% {
    background-color: blue;
  }
}

  1. Luego, aplica esta animaci贸n a un elemento. Vamos a aplicarla a un div con la clase 鈥渕iDiv鈥.
.miDiv {
  animation: cambioColor 3s infinite;
}

Esto har谩 que el div cambie su color de fondo de rojo a verde a azul en un ciclo de 3 segundos, y luego repita la animaci贸n indefinidamente.

Tercera parte.

馃帠锔 Medalla al M茅rito

Animaci贸n avanzada con Keyframes

Ahora que sabes c贸mo crear una animaci贸n b谩sica, puedes experimentar y crear animaciones m谩s complejas. Por ejemplo, puedes combinar varias propiedades a la vez:

@keyframes animacionAvanzada {
  0% {
    background-color: red;
    transform: rotate(0deg);
  }

  50% {
    background-color: green;
    transform: rotate(180deg);
  }

  100% {
    background-color: blue;
    transform: rotate(360deg);
  }
}

Y luego aplicarlo a un div:

.miDiv {
  animation: animacionAvanzada 3s infinite;
}

隆Felicidades!馃懇鈥嶐煔馃懆鈥嶐煔 Aprendiste c贸mo usar keyframes en CSS para crear animaciones

隆No olvides practicar y experimentar con diferentes animaciones!

隆Hasta la pr贸xima aventura! 馃殌

Referencias y Recursos adicionales

Escribe tu comentario
+ 2