Animation timing function, iteration count y delay

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.

• Animation Timing Function: Básicamente es la aceleración con la cual correrá nuestra animación.
• Animation Iteration Count: Es el número de veces que se repetirán nuestra animación.
• Animation Delay: Es el tiempo que nuestra animación tardará en empezar.

.
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:
.

.
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:
.

.
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

transform: translateY();

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

• https://animate.style/
• https://undraw.co/illustrations

animation delay

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/

Resumen:

• animation-timing-function: establece curvas de aceleración preestablecidas como ease o linear.
  .
• animation-iteration-count: el número de veces que se debe realizar la animación.
  .
• animation-delay: el tiempo entre el elemento que se está cargando y el inicio de la secuencia de animación (ejemplos interesantes en este tweet).

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

Notas de la clase

#Estilos del checkbox

.layer-1 input[type="checkbox"], 
        .layer-2 input[type="checkbox"], 
        .layer-4 input[type="checkbox"], 
        .layer-6 input[type="checkbox"] {
            appearance: none;
            cursor: pointer;
            height: 50px;
            margin: 0;
            position: relative;
            top: 0;
            width: 50px;
            z-index: 2;
        }