No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Animaciones CSS: Control de Duración e Iteración

6/12
Recursos

Felicidades por conseguir hacer parpadear los ojitos de nuestro conejito en el artículo anterior ✨. Además, hemos aprendido acerca de una propiedad que le asocia un nombre a nuestra animación. Ahora debemos conocer una propiedad que le indica la duración, para saber cuanto tiempo debe parpadear nuestro conejito o simplemente dejarlo en infinito ♾.

¿Y qué esperas?, acompáñanos en esta aventura 🐱‍🏍.


Propiedades para la duración de la animación ⌚

En este artículo veremos dos propiedades, las cuales su definición es la siguiente:

Propiedad animation-duration ⌛

Nos indica cuanto durará nuestra animación, solo recibe un valor que sería el tiempo, puede estar en segundos, milisegundos, etc. Los cuales serían: :::(Info) animation-duration: time | initial | inherit; :::

Propiedad animation-iteration-count ⌛

Nos indica cuantas veces se repetirá nuestra animación, también recibe solo un valor, y pueden ser los siguientes: :::(Info) animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start | end) | cubicbezier(n, n, n, n) | initial | inherit; :::


Vamos al código 💻

Dentro de la animación de nuestros ojitos, colocaremos ambas propiedades, la primera le indicará la duración que será de 2 segundos. Para la segunda propiedad, le daremos el valor de infinito para que nuestra animación se repita siempre. Así nos quedaría el siguiente fragmento dentro de la clase head__eye.

Resultado de agregar las propiedades

Una vez agregadas las dos propiedades, nos iremos a los keyframes para realizar los cambios que deseamos que contengan nuestra animación. En este caso, la propiedad que alteraremos de head__eye será height ya que haremos más pequeño el ojito para que de la impresión de que lo cierra 👀. Colocaremos que empiece su alto en 4px como ya lo estaba, luego cuando llegue al 5% de la animación su alto bajo a 1px y luego en el 10% de la animación este vuelvo a su tamaño normal. Y así nos quedaría el siguiente fragmento 👇.

Resultado de modificar los keyframes

Listo, una vez lo hayas modificado, nos dirigiremos a nuestro navegador a visualizar los cambios. Y quedaría así, colocaré los fotogramas de los porcentajes que modificamos:

Conejito con los ojitos con altura en 4px

Conejito con los ojitos con altura en 4px en el 0% de la animación

Conejito con los ojitos con altura en 1px

Conejito con los ojitos con altura en 1px en el 5% de la animación

Conejito con los ojitos con altura en 4px

Conejito con los ojitos con altura en 4px en el 10% de la animación

Seamos detallistas 🎨

Si lograron observar, podemos ver que el efecto funciona, pero al disminuir la altura, los ojitos suben en lugar de quedarse en el centro. Así que para solucionar ello de manera sencilla, le agregaremos la propiedad transform con el valor de translate.

Cuando nos encontramos en el tiempo de la animación donde los ojitos disminuyen su tamaño (es decir en 5%), lo que haremos será agregar la propiedad para que pueda bajar 2px y permanecer en el medio 🎇.

Pero si hacemos esto, cada que se repita la animación nuestros ojitos bajarán 2px de su posición actual y no queremos eso, ¿verdad? 🤨

Para ello, agregaremos en el tiempo de la animación donde los ojitos regresan a su tamaño normal (es decir en 10%), que nuestros ojitos 👀 suban 2px, así su posición original no se verá afectada. Quedando nuestro código de la siguiente forma.

Código donde se modifican los keyframes

Felicidades, esto sería todo por el artículo, qué tal te parecieron estas propiedades de duración, en el siguiente artículo veremos más propiedades de tiempo.

¡Te esperamos! 💚 Contribución creada con los aportes de:Angel David Osorio Leyva

Aportes 22

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Estas propiedades son de las más fáciles 👀. Simplemente debes decirle cuánto va a durar la animación y cuántas veces se va a repetir esa animación, es todo 👀. Únicamente con esas dos propiedades ya tienes suficiente paa que una animación empiece a correr 😄
.
Otro ejemplo de animación sencillo, además de el de la clase, podría ser el lanzamiento de algún objeto:

Cuando lanzamos un objeto es normal que a veces gire y se eleve un poco en el aire, para hacer una animación similar, solo necesitariamos 3 puntos:

Punto A: El inicio de la animación, el objeto tendrá un left inicial y un transform inicial:

0% {
    left: 50px;
    transform: rotate(0deg);
}

Punto B: A la mitad de la animación el objeto debió elevarse un poco, por tanto le cambiamos su propiedad en bottom:

50% {
    bottom: 60%;
}

Punto C: Al final de la animación el objeto debió caer y debió de haber dado unas cuantas vueltas, también debió de haberse movido, por lo que modificamos las propiedades left y transform, el bottom no lo modificamos porque por defecto volverá a su estado inicial:

100% {
    left: 1080px;
    transform: rotate(360deg);
}

Al final nuestro Keyframe podría quedar así y esto simularía un objeto que es lanzado 👀.

@keyframes throw {
  
  0% {
    left: 50px;
    transform: rotate(0deg);
  }
  
  50% {
    bottom: 60%;
  }
  
  100% {
    left: 1080px;
    transform: rotate(360deg);
  }
  
}

Obviamente necesitariamos tener un objeto al cual aplicarle la animación, este objeto debe tener un position: absolute; con respecto al contenedor padre, ya hice la tarea, así que pueden ver el código completo de esta animación aquí 👇👀.
.
Animación del lanzamiento de un objeto
.
Casi todos son estilos para que se vea más bonito y para preparar los elementos en su posición incial, pero el proceso de animado te lo acabo de explicar aquí 😄

En lo particular prefiero usar la propiedad transform para animar, ya que son más optimas para esto y hasta es más sencillo.
El código quedaría así:

@keyframes blink {
  0% {
    transform: scale(1, 1);
  }
  5% {
    transform: scale(1, 0.2);

  }
  10% {
    transform: scale(1, 1);

  }
}

Creo que también se puede usar porcentaje en el traslate para evitar modificarlo cada vez que necesitemos cambiar el tamaño de los ojos:

5% {
	height: 2px;
	transform: translate(0, 50%);
}

Resumen de la clase

En esta clase vimos como:

  • Darle nombre a nuestro keyframe (con animation-name: blink;)
  • Darle tiempo a nuestro keyframe (con animation-duration: 2s;)
  • Decirle al keyframe cuantas veces se tiene que repetir (con animation-iteration-count: infinite;)
  • Modificar las acciones del keyframe

.
Todo junto esto se ve algo como:

.clase{
  animation-name: blink;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes blink{
  10%{
    @code
  }
  20%{
    @code
  }
  30%{
    @code
  }
}

.
Esto fue lo que yo hice
.

Notas de la clase

Retomando el tema de que le cueste menos al navegador propongo

@keyframes blink {
            0%{
                transform: scaleY(1);
            }
            5%{
                transform: scaleY(.125);
            }
            10%{
                transform: scaleY(1);
            }
        }

Vamos avanzando 🔥

Me emocioné cuando vi a mis conejos parpadear, lo subí a mis historias, se lo mandé a mi novia, jajajaja, es increible la verdad

6.-Animation duration

Ahora vamos a necesitar poner a parpadear a los ojos, para esto necesitamos un tiempo para que parpadeé y que sea infinito. Para esto vamos a usar dos propiedades principales, las cuales son:

  • animation-duration: Nos da cuanto va a durar haciendo la animación.
  • animation-iteration-count: cuantas veces se va a ejecutar la animación. n veces.

El codigo de la clase se puede resumir y optimizar utilizando transform:

@keyframes blink {
  0% {
    transform: scaleY(1);
  }
  5% {
    transform: scaleY(0.25);
  }
  10% {
    transform: scaleY(1);
   }
}	

Me encanta como progreso la maestra entre los cursos anteriores. Este es mi resultado.
.

esta a nimación da un efecto de cerrar y abrir el ojo

@keyframes blink{
    0%{
      opacity: 0;
    }
    5%{
       opacity: 0.5;
    }
    10%{
      opacity: 1;
    }
}

Así va quedando el mío:v

mi proyecto hasta el momento , aprovechando la fecha,

Yo personalmente reemplace el hight por la propiedad scaleY() en la animación por motivos de rendimiento.

mas de la mitad del curso es ilustración con CSS, no animación.

Wow increible!!!

Estas son las propiedades de las animaciones más fáciles para la animación ![](https://static.platzi.com/media/user_upload/codigo-075d03e8-8637-451d-bd25-636722e11cf5.jpg)
Estos son los estilos que le dí, logre el parpadeo con aspec-ratio y modificando el top un poquito :D ```css .head\_\_eye{    width: 8px;    aspect-ratio: 1/1;    background-color: black;    border-radius: 100%;    position: absolute;    margin: 0 auto;    right: 0;    left: 0;    top: 14px;    animation-name: blink;    animation-duration: 2s;    animation-iteration-count: infinite;} @keyframes blink{    0%{        aspect-ratio: 1/1;        top: 14px;    }    5%{        aspect-ratio: 4/1;        top: 18px;    }    10%{        aspect-ratio: 1/1;        top: 14px;    }} ```