No tienes acceso a esta clase

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

Animation timing function, iteration count y delay

7/12
Recursos

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.

Agregamos input en el html

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.

Agregamos los valores para la animaci贸n

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.

Agregando los keyframes.jpeg

Abrimos nuestro proyecto en el navegador, con ayuda de nuestro inspector vemos la posici贸n de nuestro elemento input que hemos agregado 馃憞.

Nuestro proyecto en el navegador).jpeg

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

Aportes 19

Preguntas 6

Ordenar por:

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

o inicia sesi贸n.

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



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

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

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