En este artículo, veremos dos propiedades muy importantes en el tema de la aceleración 🏃♀️. Las cuales son animation timing function y animation delay.
Propiedades 🎇
Animation timing function ⌚
Básicamente es la aceleración con la cual correrá nuestra animación.
Animation delay ⏰
Es el tiempo que nuestra animación tardará en empezar.
Animation Iteration Count 📒
Es el número de veces que se repetirán nuestra animación.
Una vez explicado esto, nos vamos al código para un mejor entendimiento.
Vamos al código 💻
Para empezar, y tener un contador cada que pulsemos a nuestro conejito, la agregaremos un input de tipo checkbox, de la siguiente manera.
Dentro de nuestra etiqueta style, nos dirigiremos dentro del bloque donde se modifica la clase layer-1, e ingresaremos un nombre para la animación, una duración, el tipo de la velocidad y que sea en un bucle de manera infinita ♾, nos quedaría de la siguiente forma.
Seguimos con los Keyframes 🎯
Una vez que nuestro layer-1 tenga la propiedad animation-name, significa que ya le hemos dado un nombre para la animación, así que nos ayudaremos de ello para empezar con el keyframe. Así como la siguiente imagen. Además, agregamos la clase .layer-1 input[type=checkbox] para insertar estilos, pero lo dejaremos allí por un momento.
Abrimos nuestro proyecto en el navegador, con ayuda de nuestro inspector vemos la posición de nuestro elemento input que hemos agregado 👇.
Como podemos apreciar, nuestro input se posiciona de acuerdo a nuestro conejito 🐰.
Ahora, te reto a colocar los input a cada uno de los conejitos y el tema del contador con todo lo que ya hicimos. Me encantaría que pongas en práctica todo lo aprendido.
Nos vemos en la siguiente clase 💚. Contribución creada con los aportes de:Angel David Osorio Leyva
En este artículo, veremos dos propiedades muy importantes en el tema de la aceleración 🏃♀️. Las cuales son animation timing function y animation delay.
Básicamente es la aceleración con la cual correrá nuestra animación.
Es el tiempo que nuestra animación tardará en empezar.
Es el número de veces que se repetirán nuestra animación.
Una vez explicado esto, nos vamos al código para un mejor entendimiento.
Para empezar, y tener un contador cada que pulsemos a nuestro conejito, la agregaremos un input de tipo checkbox, de la siguiente manera.
Dentro de nuestra etiqueta style, nos dirigiremos dentro del bloque donde se modifica la clase layer-1, e ingresaremos un nombre para la animación, una duración, el tipo de la velocidad y que sea en un bucle de manera infinita ♾, nos quedaría de la siguiente forma.
Una vez que nuestro layer-1 tenga la propiedad animation-name, significa que ya le hemos dado un nombre para la animación, así que nos ayudaremos de ello para empezar con el keyframe. Así como la siguiente imagen. Además, agregamos la clase .layer-1 input[type=checkbox] para insertar estilos, pero lo dejaremos allí por un momento.
Abrimos nuestro proyecto en el navegador, con ayuda de nuestro inspector vemos la posición de nuestro elemento input que hemos agregado 👇.
Como podemos apreciar, nuestro input se posiciona de acuerdo a nuestro conejito 🐰.
Ahora, te reto a colocar los input a cada uno de los conejitos y el tema del contador con todo lo que ya hicimos. Me encantaría que pongas en práctica todo lo aprendido.
Nos vemos en la siguiente clase 💚. Contribución creada con los aportes de:Angel David Osorio Leyva
Hola,
Creo que no se tocó el tema de la estilización del checkbox. Así me quedó a mi y me dio buen resultado:
input[type=checkbox] {
position: absolute;
appearance: none;
cursor: pointer;
z-index: 1;
width: 100%;
height: 80px;
}
Saludos platzinautas.
.
La función cubic-bezier() me encanta porque podemos definir velocidades personalizadas :3. Me gustaría complementar la clase con otro ejemplo práctico de animación, por ejemplo, esta animación que hice al principio de un objeto saltando:
.
!Animation
.
Si quisiera hacer esta animación en CSS quedaría algo así, tomando en cuenta sus 4 puntos:
.
Punto A: Simplemente inicia con un left inicial:
0% {
left: 50px;
}
Punto B: Para este punto nuestro objeto simplemente se movió unos cuantos píxeles a la derecha y se encogió un poco:
40% {
left: 400px;
height: 65px;
width: 130px;
bottom: 40%;
}
Punto C: Aquí el objeto ya dio el salto hacia más a la derecha y se hizo un poquito más grande, por lo que debería estar en su punto más alto:
60% {
left: 780px;
height: 140px;
width: 100px;
bottom: calc(40% + 150px);
}
Punto D: Al final el objeto cae de nuevo, obviamente moviéndose aún más a la derecha ;)
90%, 100% {
left: 1080px;
bottom: 40%;
}
Aquí puse al 90% y al 100% juntitos porque quiero que tanto en el 90% commo en el 100% se conserven los mismos valores :3
.
Al final tendría este resultado:
.
!Jump Animation
.
Así de fácil es crear animaciones con CSS, simplemente necesitas pensar qué acción estará haciendo tu objeto en cada punto y con base en ello puedes empezar a programar la animación :3.
.
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 de un objeto saltando
Recordar que también se puede con la propiedad
animation: layout 2s ease-in-out alternate infinite;
@keyframes layout {
0% {transform: translateY(0);}
50% {transform: translateY(80px);}
90% {transform: translateY(-80px);}
}
Quiero dejar dos sitios que, pueden ayudarles ( práctica ).
Le agregue un titulo haciendo uso de unas cositas que aprendí en el curso de grid con @teffcode, y también una sombra a mis osos
⚠️ Importante: ⚠️
El ítem que muestra el conteo, en este caso total-count debe estar siempre después de los checkbox, de lo contrario el conteo es ignorado. Esto último tiene total sentido si recordamos que CSS es una hoja de estilos en cascada.
postada: estuve batallando un rato con esto. Jejeje.
En esta clase no se toco el tema de animation-delay, pero es muy sencillo, lo único que hacemos es agregarle a cada uno de los elementos que tienen animación un delay, y esto lo que hace es que retrasa la animación en segundos antes de que se lleve acabo la animación. En codigo se ve algo así:
.class{
animation-delay: 2s;
}
.
Con el delay, yo pude hacer que cada uno de los botones apareciera de manera desordenada:
.
Crea tus animaciones con esta pagina Generadores de Animaciones Se las recomiendo https://www.theappguruz.com/tag-tools/web/CSSAnimations/ https://cssanimate.com https://webcode.tools/generators/css/keyframe-animation https://angrytools.com/css/animation/
Así va el mio, Disney inspired 