No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

5D
2H
49M
5S

Animation duration

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 25

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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铆 馃槃

Conejitos Saltarines 馃槃

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);

  }
}

Quise darle a mi reto un significado especial, y por eso me bas茅 en un dibujo que guard茅 y vectoric茅 hecho por mi pareja (: 鉂わ笍

.
gif
.
P.D.: El sanic s铆 es de un sticker que amo 馃槢

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%);
}

Aqui les dejo mi dise帽o, yo quise agregarle pandas 馃榿
Aqui se puede visualizar mejor:
https://stivenbautista1998.github.io/pandaland/

Notas de la clase



as铆 quedo mi nousagi ya con animacion (*w*)

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
.

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 馃敟

mi proyecto hasta el momento , aprovechando la fecha,

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);
   }
}	

As铆 va quedando el m铆o:v

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;
    }
}

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.

Wow increible!!!

Asi quedaria el parpadeo de mis fantasmas 馃憖

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

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