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

 
trate de hacerlo antes de ver la clase así que lo hice como si lo hubiera hecho con C con puras matrices XD.
 
En fin si ha alguien le da curiosidad el código entero esta en mi github y la implementación esta en la page
 

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

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

Ya casi.

Notas de la clase

Así va el mio, Disney inspired

https://www.w3schools.com/css/css3_transitions.asp échale un ojo

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

Asi va el mio, no jueguen hay muchos ejercicios bien padres.Ash.!

Hice algo ademas del conejito que publique el codigo anteriormente, un carrito con animacion:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Try</title>

    <style>
        body{
            background:linear-gradient(25deg, green 20%, blue 75%);
        }

        .chasis{
            background: linear-gradient(230deg, transparent 25%,#fff 25%) ;
            width: 200px;
            height:50px;
            z-index:100;
            position:absolute;
            top:35px;
            left:70px;
            border-radius: 10px 10px 10px  10px;
        }

        .LinearGradient{
           width:35px;
           height:35px;
           background: linear-gradient(55deg, #445533 55%,#ffeeff 55%);
           border-radius:10%;
           animation: mover-rueda 7s infinite  ;
           border-radius: 100px;
           margin:20px; 
           display:inline-block;
        }

        .rueda-isquierda{
           position:absolute;
           top:55px;
           left:75px;
        }

        .rueda-derecha{
           position:absolute;
           top:55px;
           left:170px;
        }

        @keyframes mover-rueda{
            0%{
                transform:rotate(0deg);
            }
            100%{
                transform:rotate(360deg);
            }
        }
        @keyframes mover-left{
            0%{
                transform:translateX(0px);
            }
            50%{
                transform:translateX(850px);
            }
            100%{
                transform:translateX(0px);
            }
        }
        .puerta{
            background: linear-gradient(230deg,transparent 25%,#888);
            width:40px;
            height:44px;
            z-index:100;
            position:absolute;
            right:35px;
            top:5px; 
            background-repeat:repeat-x;
        }


        .puerta-1{
            background: linear-gradient(230deg,transparent 25%,#888);
            width:40px;
            height:44px;
            z-index:100;
            position:absolute;
            right:75px;
            top:5px; 
            background-repeat:repeat-x;
        }

        
        .car{
            position : relative;
            animation: mover-car-right 50s infinite  ;
        }
        @keyframes mover-car-right{
            0%{
                transform:translateX(0px);
            }
            50%{
                transform:translateX(850px);
            }
            100%{
                transform:translateX(0px);
            }
        }
        .rines{
            width:7px;
            height:7px;
            background-color:#fff;
            border-radius:100px;
            position:absolute;
            top:25%;
            left:25%;
            border: dashed  5px #888;
        }
        .road{
            width:100%;
            height:120px;
            background:linear-gradient(25deg, #3333ef 20%, #afafff 75%);
            position:absolute; 
            z-index: -1;
        }
        .inner-road{
            width:100%;
            height:45px;
            background-color:#000;
            position:absolute;
            bottom:0px;
            z-index: -1;
        }

        .road-divide{
            width:100%; 
            border-bottom: dashed 2px yellow;
            position:absolute;
            bottom:50%;
            z-index: -1;
        }
        
    </style>


</head>
<body>
    <div>
     
    <div class=car>
        <div class=chasis> 
            <div class=puerta-1></div>
            <div class=puerta></div>
        </div>

        <div class="LinearGradient rueda-isquierda">  
            <div class="rines"></div>
        </div>
        
        
        <div class="LinearGradient rueda-derecha">  
            <div class="rines"></div>
        </div>
    </div>
    <div class=road>
        <div class="inner-road">
            <div class="road-divide"></div>    
        </div>
    </div>
    </div>
</body>
</html>

![](

se que no es muy bueno pero hice lo mejor que pude jeje

Aqui otra forma para darle movimiendo al conejo con transform

@keyframes capa {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}