No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Animation direction, fill mode y play state

8/12
Recursos

Aportes 37

Preguntas 12

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Compañeros vengo después de romperme la cabeza un rato y vengo a poner mi descubrimiento.
para que el contador funciones correctamente.
En el codigo HTML
Si ponemos el contador del score arriba de lo que queremos contabilizar este no los va a contar.
Me pasaba que yo ponía lo siguiente (este es un codigo mas simplificado):

<input type="checkbox">

<h3 class="total-count"> Score: </h3>

<div class="layer-1">
 	<input type="checkbox">
 <div class="layer-2">
         <input type="checkbox">

<input type="checkbox">

El input de hasta arriba me lo contaba sin problema.
Pero los dos que tienen clase layer y el ultimo input (siendo igual al primero) no los contaba al hacer el checked al input.
Estuve un buen rato viendo que pasaba, hasta que me di cuenta que el counter solo toma los valores que estén arriba de este. No los que estan debajo.

Al cambiar el HTML a:

<input type="checkbox">

<div class="layer-1">
 	<input type="checkbox">
 <div class="layer-2">
         <input type="checkbox">

<h3 class="total-count"> Score: </h3>

<input type="checkbox">

Así reconoce el primer input y los dos que tienen clase layer, pero el ultimo por estar debajo no lo contara.
Que la fuerza los acompañe

Le coloqué una animación para que los conejitos “mueran”. 😅

Aquí el codepen

Animation direction, fill mode y play state

PROPIEDAD ANIMATION-DIRECTION

Mediante esta propiedad indicamos cómo debe ejecutarse una animación: hacia delante (del principio al final), hacia atrás (del final al principio), una vez hacia delante y otra hacia detrás, etc. La animación habrá sido definida en una regla @keyframes y va a ser aplicada a un elemento seleccionado mediante un selector CSS. El valor por defecto para esta propiedad es normal (implica que la animación se ejecutará hacia delante). Sus valores posibles son cualquiera de estas palabras clave:

  • normal: la animación se ejecutará hacia delante. Si se repite, cuando vuelve a empezar parte de la situación inicial.

  • reverse: la animación se ejecutará hacia detrás. Si se repite, cuando vuelve a empezar parte de la situación inicial.

  • alternate: la animación se ejecutará una vez en un sentido y otra vez en otro, comenzando hacia delante, luego hacia detrás y así sucesivamente el número de repeticiones especificado.

  • alternate-reverse: la animación se ejecutará una vez en un sentido y otra vez en otro, comenzando hacia detrás, luego hacia delante y así sucesivamente el número de repeticiones especificado.

Si se desean aplicar varias animaciones, se especificarán sus direcciones separadas por comas, siendo cada valor correspondiente a la animación cuyo nombre figura en el mismo orden en la propiedad animation-name.

Esta propiedad puede no ser reconocida por los navegadores antiguos o requerir del uso de prefijos específicos o no ser reconocida por algunos navegadores actuales. Consulta en Mozilla Developer Network para conocer si debes aplicar prefijos o si la propiedad será reconocida por un navegador concreto.

PROPIEDAD ANIMATION-PLAY-STATE

Esta propiedad permite detener una animación que se está ejecutando (ponerla en pausa). Su valor por defecto es running y sus dos valores posibles son:

  • running: la animación está en ejecución
  • paused: la animación está en pausa

Esta propiedad puede no ser reconocida por los navegadores antiguos o requerir del uso de prefijos específicos para algunos navegadores actuales. Consulta en Mozilla Developer Network para conocer si debes aplicar prefijos.

Ejemplo: .pubMov:hover{ animation-play-state:paused; } con esta regla damos lugar a que la animación se detenga si el usuario pone el puntero del ratón sobre el elemento animado.

PROPIEDAD ANIMATION-FILL-MODE

Esta propiedad permite detener definir cómo debe comenzar y cómo debe quedar un elemento que tiene una animación. Su valor por defecto es none (implica que el elemento comenzará y quedará en el estado que tenía antes de que comenzara la animación) y sus valores posibles son:

  • none: el elemento comenzará y quedará en el estado previo a la animación.

  • forwards: el elemento quedará en el estado final de la animación.

  • backwards: el elemento se pondrá en el estado indicado para el comienzo de la animación inmediatamente y esperará en ese estado hasta que se cumpla el tiempo indicado en animation-delay. Una vez se cumpla ese tiempo la animación continuará la ejecución desde ese estado inicial.

  • both: combinación de las dos opciones anteriores.

Esta propiedad puede no ser reconocida por los navegadores antiguos o requerir del uso de prefijos específicos para algunos navegadores actuales. Consulta en Mozilla Developer Network para conocer si debes aplicar prefijos.

Ejemplo: .pubMov:hover{ animation-fill-mode: forwards; } con esta regla damos lugar a que cuando la animación se detenga quede en el último estado definido (el correspondiente a to ó 100% dentro de la regla @keyframes).

Realice un juego con las animaciones:

Pagina web

Git hub

Espero les sirva.

Y otra vez no se explicó a detalles las propiedades ni sus valores ni se lo aplicó en el código con un ejemplo…

Animatioland Game

GitHub | CodePen

No explicó nada xd

Yo me dedidco al backend. No me pidan que haga cosas bonitas 😦 jajaja

Amigos ya termine mi juego
Como habían unos pequeños problemitas con el contador del Score, decidí usar botones en ves del checkbox, y con js hice que cada vez que se haga click se cuente, de esta forma mejore mucho la usabilidad del juego

Si gustan lo juegan, sería genial para mi
https://catchbear.netlify.app/

SI quieren darle feedback comentan por aquí, gracias

Este es mi github
https://github.com/FabianXRL16/CatchMonkey
No me molesto si me regalan una estrellita, gracias, espero les guste

Este es el que logré hacer, es del anime Full Metal Panic: Fumoffu
El repositorio por si quieres hacerle fork o mejorarlo es
https://github.com/Dann-Herz/animetionland
y el github page https://dann-herz.github.io/animetionland/
.
.

En mi caso decidi hacerlo con JavaScript para agregarle un poco mas de funcionalidades en la marcha, le he agregado un boton que funciona como palanca para iniciar el juego :3
.

Pantalla inicial

.
Fin del juego:

.
Comparto el codepen por si alguien quiere darle un vistazo y de paso jugar un par de segundos 😀: Bunnyland

pesima organizacion en el taller, se supone que estas lecciones deben ser interactiva de manera que el estudiante se desenvuelva agilmente pero fue lo contrario.

Por si alguien tiene problemas con el contador.
1- Debemos ubicarnos en el elemento div con clase phone, nuestro contenedor principal.
Le asignamos el contador por medio de la propiedad counter-reset.

HTML

    <div class="phone">

    </div>

CSS, con esto le decimos que tiene el contador de conejos, “puede ser cualquier nombre”.

.phone {
    counter-reset: rabbit;
}

2-Ahora debemos aumentar ese contador por medio de la propiedad counter-increment, así.

En este caso aumentaré el contador cuando un input de tipo checkbox esté marcado/seleccionado, estos deben estar DENTRO del contenedor que tiene asignado el contador.

HTML

<div class="phone">
    <input type="checkbox" />
</div>

CSS. por medio de la pseudoclase checked aumentaremos 1 en el contador, así
En este caso le digo que a todos los input de tipo checkbox que estén marcados/selecionados aumente en 1 el contador de rabbit.

input[type="checkbox"]:checked {
  counter-increment: rabbit;
}

3- por último, para mostrar el marcador tenemos que crear nuestra etiqueta, ya sea h1, h2, p, o la que sea, pero esta debe ser el ÚLTIMO elemento hijo del div con clase phone, así

HTML

<div class="phone">
    <input type="checkbox" />
    <h2 class="count">Rabbits: </h2>
</div>

CSS, por medio de los pseudoelementos after o before, usando la propiedad content le decimos que agregue el valor del contador, así.

.count::after {
  content: counter(rabbit);
}

Y listo, es importante el orden.

Así nomas quedo. En el gif no se ve muy bien pero yo muevo el mouse picando los “botones” y el counter aumenta.
.

Animation Direction

Dirección de la animación.

  • Normal: La animación se reproduce hacia delante en cada ciclo. Por defecto.
  • Reverse: La animación se reproduce hacia atrás en cada ciclo.
  • Alternate: La animación se invierte en cada ciclo, y la primera iteración se reproduce hacia adelante.
  • Alternate-reverse: La animación invierte la dirección en cada ciclo, y la primera iteración se reproduce hacia atrás.

Animation Fill Mode

Estado de cierta animación. Al inicio o final.

Animation Play State

Define si la animación se reproduce o es pausada. (running or paused)

Si les sale un scroll pueden usar la propiedad overflow para que no les haga ese salto en el scroll.

.phone{
	overflow: hidden;
}

o

body{
	overflow: hidden;
}

Vamos en camino. Había cometido el error de colocar el score arriba y no sumaba correctamente. Al modificarlo quedó perfecto.

Hola, ha sido muy emocionante, quiero compartir mis avances, aquí les dejo mi repo y el deploy por si quieren curiosear. 😊

Listo , listo

Proyecto terminado les dejo el código a continuación. Les aconsejo que lo lean y vean como hago las cosas para que les sea más fácil entender las propiedades.

Me gusto mucho este curso, este es mi proyecto:

Creo que ha sido uno de los cursos que más me ha gustado jaja. En especial porque desde el anteiror curso tuve que ir a ver Alicia en el páis de las maravillas para entender las referencias. Les comparto mi resultado

Repositorio

mi juego
https://juegomario.herokuapp.com/
sugerencias las apreciaría mucho.

😃 Así quedó mi proyecto final:
Lo Monté en Codepen, para lo que quiera miralo: Pokémon AnimationLand

Este es el link de mi proyecto:
https://super-gecko-496f65.netlify.app
.
Use javascript para los puntos, adjunto mi codigo
.

<!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>Document</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            width: 100%;
            display: grid;
            place-items: center;
            font-family: 'Roboto', sans-serif;
        }
        h1 {
            font-size: 2rem;
            margin: 0;
            position: absolute;
            top: 7%;
            width: 90%;
            text-align: center;
        }        

        .phone {
            position: relative;
            border: 8px solid #000;
            border-radius: 40px;
            width: 300px;
            height: 600px;
            background: #ccefff;
            box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
            overflow: hidden;
        }
        .score {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(-50%, 0);
            font-size: 1.5rem;
        }
        /* Bunny 1 */
        .layer-1 {
            position: absolute;
            z-index: 1;
            height: 450px;
            width: 80px;
            bottom: 0;
            right: 60px;
            animation: bunny-1 1s ease-in-out infinite;
        }

        @keyframes bunny-1 {
            0% {
                bottom: 0;
            }
            25% {
                bottom: -80px;
            }
            100% {
                bottom: 0;
            }
        }

        .bunny {
            cursor: pointer;
        }

        /* bunny 2 */

        .layer-2 {
            position: absolute;
            z-index: 2;
            height: 450px;
            width: 80px;
            bottom: 0;
            left: 60px;
            animation: bunny-2 750ms ease-in-out infinite;
        }

        @keyframes bunny-2 {
            0% {
                bottom: 0;
            }
            25% {
                bottom: -80px;
            }
            100% {
                bottom: 0;
            }
        }

        .layer-3 {
            position: absolute;
            z-index: 3;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0 auto;
            width: 220px;
            height: 400px;
            background: rgb(153, 106, 87);
            border-radius: 30px;
            overflow: hidden;
        }

        /* bunny 3 */
        .layer-4 {
            position: absolute;
            z-index: 4;
            left: 30px;
            bottom: 0;
            height: 300px;
            width: 80px;
            animation: bunny-3 600ms ease-in-out infinite;
        }

        @keyframes bunny-3 {
            0% {
                bottom: 0;
            }
            25% {
                bottom: -80px;
            }
            100% {
                bottom: 0;
            }
        }

        .layer-5 {
            position: absolute;
            z-index: 5;
            left: 0;
            bottom: 0;
            height: 250px;
            width: 220px;
            background: rgb(153, 106, 87);
            border-radius: 30px;
            overflow: hidden;
        }

        /* bunny 4 */
        .layer-6 {
            position: absolute;
            z-index: 6;
            right: 30px;
            bottom: 0;
            height: 200px;
            width: 80px;
            animation: bunny-4 750ms ease-in-out infinite;
        }

        @keyframes bunny-4 {
            0% {
                bottom: 0;
            }
            25% {
                bottom: -80px;
            }
            100% {
                bottom: 0;
            }
        }

        .layer-7 {
            position: absolute;
            z-index: 7;
            right: 0;
            bottom: 0;
            height: 150px;
            width: 175px;
            background: rgb(153, 106, 87);
            border-radius: 30px;
            overflow: hidden;
        }

        .layer-8 {
            position: absolute;
            z-index: 8;
            right: 0;
            bottom: 0;
            left: 0;
            margin: 0 auto;
            height: 100px;
            width: 135px;
            border-radius: 150px 150px 0 0;
            background: rgb(100, 168, 100);
        }

        .layer-8::after {
            content: '';
            position: absolute;
            z-index: -1;
            top: 15px;
            left: -25px;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            background: rgb(100, 168, 100);
        }

        .layer-8::before {
            content: '';
            position: absolute;
            z-index: -1;
            top: 5px;
            right: -25px;
            width: 75px;
            height: 50px;
            border-radius: 100px 75px 0 0;
            background: rgb(100, 168, 100);
        }

        .layer-9 {
            position: absolute;
            z-index: 9;
            bottom: 0;
            left: 0;
            height: 60px;
            width: 100px;
            background: white;
            border-radius: 50px 50px 0 0;
        }
        .layer-9::after {
            content: '';
            position: absolute;
            z-index: -1;
            top: 5px;
            left: -15px;
            height: 50px;
            width: 50px;
            background: white;
            border-radius: 50px 50px 0 0;
        }
        .layer-9::before {
            content: '';
            position: absolute;
            z-index: -1;
            top: 15px;
            right: -19px;
            height: 60px;
            width: 50px;
            background: white;
            border-radius: 50px 50px 60px 0;
        }

        .layer-10 {
            position: absolute;
            z-index: 10;
            bottom: 0;
            right: 0;
            height: 80px;
            width: 100px;
            background: white;
            border-radius: 50px 50px 0 0;
        }
        .layer-10::before {
            content: '';
            position: absolute;
            z-index: -1;
            top: 15px;
            right: -19px;
            height: 60px;
            width: 50px;
            background: white;
            border-radius: 50px 50px 0 0;
        }
        .layer-10::after {
            content: '';
            position: absolute;
            z-index: -1;
            top: 15px;
            left: -15px;
            height: 70px;
            width: 50px;
            background: white;
            border-radius: 100%;
        }

        .left-ear {
            background-color: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            left: 15px;
        }

        .left-ear::after {
            content: "";
            background-color: pink;
            width: 10px;
            height: 10px;
            position: absolute;
            width: 60%;
            height: 75%;
            border-radius: 90%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .right-ear {
            background-color: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            right: 15px;
        }

        .right-ear::after {
            content: "";
            background-color: pink;
            width: 10px;
            height: 10px;
            position: absolute;
            width: 60%;
            height: 75%;
            border-radius: 90%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .head {
            background-color: white;
            border-radius: 50%;
            height: 80px;
            left: 0;
            right: 0;
            margin: 0 auto;
            position: absolute;
            top: 30px;
            width: 100%;
        }

        .head__eye {
            background-color: gray;
            border-radius: 50%;
            width: 4px;
            height: 4px;
            position: absolute;
            top: 15px;
            animation-name: blink;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        @keyframes blink {
            0% {
                height: 4px;
            }
            5% {
                transform: translate(0px, 2px);
                height: 1px;
            }
            10% {
                transform: translate(0px, 0px);
                height: 4px;
            }
        } 

        .head__eye--left {
            left: 30px;
        }

        .head__eye--right {
            right: 30px;
        }
        .grass {
            background-color: rgb(100, 168, 100);
            width: 100%;
            height: 20px;
            position: relative;
            
        }
        .grass::after {
            content: "";
            background: linear-gradient(135deg, rgb(100, 168, 100) 25%, transparent 25%) -20px 0,
                linear-gradient(-135deg, rgb(100, 168, 100) 25%, transparent 25%) -20px 0,
                linear-gradient(45deg, rgb(153, 106, 87) 25%, transparent 25%),
                linear-gradient(-45deg, rgb(153, 106, 87) 25%, transparent 25%);
            background-size: 40px 40px;
            background-color: rgb(109, 76, 76);
            width: 100%;
            height: 40px;
            top: 20px;
            bottom: 0px;
            position: absolute;
        }
    </style>
</head>

<body>
    <h1>Haz click en los conejos</h1>
    <div class="phone">
        <h3 class="score">
            Score: 
        </h3>
        <div class="bunny layer-1">
            <!-- bunny 1 -->
            <div class="left-ear"></div>
            <div class="right-ear"></div>
            <div class="head">
                <div class="head__eye head__eye--left"></div>
                <div class="head__eye head__eye--right"></div>
            </div>
        </div>
        <div class="bunny layer-2">
            <!-- bunny 2 -->
            <div class="left-ear"></div>
            <div class="right-ear"></div>
            <div class="head">
                <div class="head__eye head__eye--left"></div>
                <div class="head__eye head__eye--right"></div>
            </div>
        </div>
        <div class="layer-3">
            <!-- wall 1 -->
            <div class="grass"></div>
        </div>
        <div class="bunny layer-4">
            <!-- bunny 3 -->
            <div class="left-ear"></div>
            <div class="right-ear"></div>
            <div class="head">
                <div class="head__eye head__eye--left"></div>
                <div class="head__eye head__eye--right"></div>
            </div>
        </div>
        <div class="layer-5">
            <!-- wall 2 -->
            <div class="grass"></div>
        </div>
        <div class="bunny layer-6">
            <!-- bunny 4 -->
            <div class="left-ear"></div>
            <div class="right-ear"></div>
            <div class="head">
                <div class="head__eye head__eye--left"></div>
                <div class="head__eye head__eye--right"></div>
            </div>
        </div>
        <div class="layer-7">
            <!-- wall 3 -->
            <div class="grass"></div>
        </div> <!-- wall 3 -->
        <div class="layer-8"></div> <!-- lawn 1 -->
        <div class="layer-9"></div> <!-- lawn 2 -->
        <div class="layer-10"></div> <!-- lawn 3 -->
    </div>
</body>
<script type="text/javascript">
    let score = 0;
    let scoreElement = document.querySelector('.score');
    let bunnies = document.querySelectorAll('.bunny');
    scoreElement.innerHTML = `Score: ${score}`;

    bunnies.forEach(bunny => {
        bunny.addEventListener('click', () => {
            score++;
            scoreElement.innerHTML = `Score: ${score}`;
        })
    })

</script>
</html>

Así va por el momento:

Hello my friends, les dejo la tipografía de Alice in Wonderland

/*CSS*/
@font-face {
font-family: "Alice in Wonderland"; 
src: url("//db.onlinewebfonts.com/t/bd9854838c01df28d837da7fa2240dcd.eot");       
src: url("//db.onlinewebfonts.com/t/bd9854838c01df28d837da7fa2240dcd.eot?#iefix") format("embedded-opentype"),        url("//db.onlinewebfonts.com/t/bd9854838c01df28d837da7fa2240dcd.woff2") format("woff2"),        url("//db.onlinewebfonts.com/t/bd9854838c01df28d837da7fa2240dcd.woff") format("woff"),        url("//db.onlinewebfonts.com/t/bd9854838c01df28d837da7fa2240dcd.ttf") format("truetype"),        url("//db.onlinewebfonts.com/t/bd9854838c01df28d837da7fa2240dcd.svg#Alice in Wonderland") format("svg"); 
}

/*Para el div con clase title*/
 .title {
        font-family: "Alice in Wonderland"; 
        font-size: 25px;
        line-height: 0;
        text-align: center;
        color: #940000;
      }
/*HTML*/
 <div class="title">
        <h1>Animation-Land</h1>
        <h2 class="total-counter">Score: </h2>
  </div>

🐇🐇🐇🐇

<!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>Document</title>
    <style>
        :root{
            --dark-brown: #a54a38;
            --light-brown: #bf624c;
            --dark-green: #51af5e;
            --light-green: #51af5e;
            --shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
        }
        body{
            counter-reset: score;
            margin: 0;
            height: 100vh;
            width: 100%;
            display: grid;
            place-items: center;
        }
        .score{
            color: var(--light-brown);
            font-family: Arial, sans-serif;
            font-size: 16px;
            margin: 0;
            text-align: center;
        }
        .score::after{
            content: counter(score);
        }

        input[type=checkbox]{
            appearance: none;
            cursor: pointer;
            height: 50px;
            margin: 0;
            position: absolute;
            top: 0;
            width: 80px;
            z-index: 2;
        }
        input[type=checkbox]:checked{
            counter-increment: score;
        }
        .layer-title{
            display: grid;
            place-items: center;
            align-content: center;
            width: 100%;
            height: 150px;
            gap: 10px
        }
        .layer-title img{
            width: 60%;
        }
        .phone{
            position: relative;
            border: 8px solid black;
            border-radius: 40px;
            height: 600px;
            width: 300px;
            overflow: hidden;
            background-color: #ccefff;
            box-shadow: 0 19px 38px rgba(0,0,0,.3),
                        0 15px 12px rgba(0,0,0,.22);
        }
        .layer{
            position: absolute;
        }
        @keyframes layer {
            0%{
                transform: translateY(70px);
            }
            45%{
                transform: translateY(0px);
            }
            100%{
                transform: translateY(70px);
            }
        }
        .bunny{
            transform: translateY(70px);
            animation-name: layer;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
        }
        .layer-1{
            z-index: 1;
            height: 450px;
            width: 80px;
            bottom: 0;
            right: 60px;

            animation-duration: 1s;

        }
        .layer-2{
            z-index: 2;
            height: 450px;
            width: 80px;
            bottom: 0;
            left: 60px;

            animation-duration: 1s;
            animation-delay: .35s;
        }
        .layer-3{
            z-index: 3;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 220px;
            height: 385px;
            bottom: 0;
        }
        .layer-4{
            z-index: 4;
            height: 350px;
            width: 80px;
            bottom: 0;
            left: 25px;

            animation-duration: 1s;
            animation-delay: .65s;
        }
        .layer-5{
            z-index: 5;
            width: 220px;
            height: 285px;
            bottom: 0;
        }
        .layer-6{
            z-index: 6;
            height: 240px;
            width: 80px;
            bottom: 0;
            right: 25px;

            animation-duration: 1s;;
            animation-delay: .5s
        }
        .layer-7{
            z-index: 7;
            height: 175px;
            width: 150px;
            bottom: 0;
            right: 0;
        }
        .layer-8{
            z-index: 8;
            height: 100px;
            width: 250px;
            margin: 0 auto;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .layer-9{
            z-index: 9;
            height: 80px;
            width: 120px;
            bottom: 0;
            left: 0;
        }
        .layer-10{
            z-index: 10;
            height: 80px;
            width: 120px;
            bottom: 0;
            right: 0;
        }
        .left-ear--outer{
            background: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            left: 10px;
        }
        .left-ear--inner{
            background-color: pink;
            border-radius: 90%;
            width: 13px;
            height: 46px;
            position: absolute;
            left: 13px;
            top: 4px;
        }
        .right-ear--outer{
            background: white;
            border-radius: 90%;
            width: 20px;
            height: 50px;
            position: absolute;
            right: 10px;
        }
        .right-ear--inner{
            background-color: pink;
            border-radius: 90%;
            width: 13px;
            height: 46px;
            position: absolute;
            right: 13px;
            top: 4px;
        }
        .head{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            position: absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            top: 40px;
            background-color: white;
        }
        .head__eye{
            background-color: gray;
            border-radius: 50%;
            height: 8px;
            width: 8px;
            position: absolute;
            top: 15px;

            animation-name: blink;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
        @keyframes blink {
            0%{
                transform: scaleY(1);
            }
            5%{
                transform: scaleY(.125) translateY(50%);
            }
            10%{
                transform: scaleY(1);
            }
        }
        .head__eye--left{
            left: 15px;
        }
        .head__eye--right{
            right: 15px;
        }
        .hill{
            width: 100%;
            height: 100%;
            background-color: #ab6045;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-radius: 20px;
            box-shadow: 0 19px 38px rgba(0,0,0,.3),
                        0 15px 12px rgba(0,0,0,.22);
        }
        .hill .top{
            background-color: #71ac73;
            width: 100%;
            height: 10px;
        }
        .hill .middle{
            height: 50px;
            background: linear-gradient(135deg, #71ac73 25%, transparent 25%) 9px 0,
            linear-gradient(-135deg, #71ac73 25%, transparent 25%) 9px 0,
            linear-gradient(45deg, #c17859 25%, transparent 25%) -15px -8px,
            linear-gradient(-45deg, #c17859 25%, transparent 25%) -15px -8px;
            background-size: 50px 50px;
        }
        .hill .bottom{
            margin-top: -8px;
            height: 10px;
            width: 100%;
            flex-grow: 1;
            background-color: #c17859;
        }
        .arbusto, .nuve{
            position: relative;
            width: 100%;
            height: 100%;
        }
        .arbusto .circle{
            background-color: #70ab71;
        }
        .nuve .circle{
            background-color: white;
        }
        .circle{
            border-radius: 50%;
            position: absolute;
        }
        .arbusto .circle{
            height: 130px;
            width: 40%
        }
        .nuve .circle{
            height: 90px;
            width: 55%
        }
        .circle:nth-child(2){
            top: -30px;
            left: 0;
            right: 0;
            margin: 0 auto;
        }
        .circle:nth-child(1){
            left: 0%;
            bottom: -10px;
            transform: rotate(-60deg);
        }
        .circle:nth-child(3){
            right: 0%;
            bottom: -20px;
            transform: rotate(60deg);
        }
        .circle:nth-child(4){
            left: 0;
            right: 0;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="phone">
        
        <!--bunny 1-->
        <div class="layer layer-1 bunny">
            <input type="checkbox">
            <div class="left-ear--outer"></div>
            <div class="left-ear--inner"></div>
            <div class="right-ear--outer"></div>
            <div class="right-ear--inner"></div>
            <div class="head">
                <div class="head__eye head__eye--left"></div>
                <div class="head__eye head__eye--right"></div>
            </div>
        </div>
        <div class="layer layer-2 bunny">
            <input type="checkbox">
            <div class="left-ear--outer"></div>
            <div class="left-ear--inner"></div>
            <div class="right-ear--outer"></div>
            <div class="right-ear--inner"></div>
            <div class="head">
                <div class="head__eye head__eye--left"></div>
                <div class="head__eye head__eye--right"></div>
            </div>
        </div>
        <div class="layer layer-3">
            <div class="hill">
                <div class="top"></div>
                <div class="middle"></div>
                <div class="bottom"></div>
            </div>
        </div>
        <div class="layer layer-4 bunny">
            <input type="checkbox">
            <div class="left-ear--outer"></div>
            <div class="left-ear--inner"></div>
            <div class="right-ear--outer"></div>
            <div class="right-ear--inner"></div>
            <div class="head">
                <div class="head__eye head__eye--left"></div>
                <div class="head__eye head__eye--right"></div>
            </div>
        </div>
        <div class="layer layer-5">
            <div class="hill">
                <div class="top"></div>
                <div class="middle"></div>
                <div class="bottom"></div>
            </div>
        </div>
        <div class="layer layer-6 bunny">
            <input type="checkbox">
            <div class="left-ear--outer"></div>
            <div class="left-ear--inner"></div>
            <div class="right-ear--outer"></div>
            <div class="right-ear--inner"></div>
            <div class="head">
                <div class="head__eye head__eye--left"></div>
                <div class="head__eye head__eye--right"></div>
            </div>
        </div>
        <div class="layer layer-7">
            <div class="hill">
                <div class="top"></div>
                <div class="middle"></div>
                <div class="bottom"></div>
            </div>
        </div>
        <div class="layer layer-8">
            <div class="arbusto">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
        </div>
        <div class="layer layer-9">
            <div class="nuve">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
        </div>
        <div class="layer layer-10">
            <div class="nuve">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
        </div>
        <div class="layer-title">
            <img src="https://i.ibb.co/J3Kn71r/cbd152ddb203fe23ad78261749534e7d.png" alt="Animationland">
            <div class="score">
                Score: 
            </div>
        </div>
    </div>
</body>
</html>
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */

animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes name | duration | timing-function | delay */

animation: slidein 3s linear 1s;

/* @keyframes name | duration */

animation: slidein 3s;

Las subpropiedades de animation son:

animation-delay

Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.

animation-direction

Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.

animation-duration

Indica la cantidad de tiempo que la animación consume en completar su ciclo (duración).

animation-iteration-count

El número de veces que se repite. Podemos indicar infinite para repetir la animación indefinidamente.

animation-name

Especifica el nombre de la regla @keyframes que describe los fotogramas de la animación.

animation-play-state

Permite pausar y reanudar la secuencia de la animación

animation-timing-function

Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.

animation-fill-mode

Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).

Listoooo! reto completado! 😄
.

.
Aquí el código por si les sirve de algo:

extends componentes/plantilla.pug 
block contenidos
    section.phone
        //Rabbit
        .layer-1
            input(type="checkbox")
            +Rabbit
        //Rabbit
        .layer-2
            input(type="checkbox")
            +Rabbit
        //Hill
        .layer-3
            .pattern
        //Rabbit
        .layer-4
            input(type="checkbox")
            +Rabbit
        //Hill 
        .layer-5
            .pattern
        //Rabbit 
        .layer-6
            input(type="checkbox")
            +Rabbit
        //Hill 
        .layer-7
            .pattern
        //Bush center 
        .layer-8
            .bottom-branch--center
            .top-branch--center
        //Bush right
        .layer-9  
            .bottom-branch--right
            .top-branch--right
        //Bush left
        .layer-10
            .bottom-branch--left
            .top-branch--left
        figure.animationland
            img(src="/assets/images/animationland_title.png")
        h3.total-counter SCORE:

.

body {
    margin: 0;
    height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
    text-align: center;
}
.animationland {
    margin: 30px 0 0 0;
}
.total-counter {
    margin: 0;
    color: #bb6d51;
    font-family: Roboto;
    text-align: center;
    &::after {
        content: " " counter(game);
    }
}
.phone {
    position: relative;
    border: 8px solid black;
    border-radius: 40px;
    height: 600px;
    width: 300px;
    background: #CCEFFF;
    box-shadow: 0 19px 38px rgba(0,0,0,0.3), 0 15px 12px rgba(0,0,0,0.22);
    overflow: hidden;
    counter-reset: game;
}
.layer-1 {
    z-index: 1;
    @include rabbit(450px, 160px, 0);
    @include animation_show-rabbit(1s);
    @include rabbit-checkbox;
}
.layer-2 {
    z-index: 2;
    @include rabbit(450px, 60px, 0);
    @include animation_show-rabbit(2s);
    @include rabbit-checkbox;
}
.layer-3 {
    z-index: 3;
    @include hill(220px, 395px, 0, 0);
    margin: 0 auto;
}
.layer-4 {
    position: absolute;
    z-index: 4;
    @include rabbit(345px, 30px, 0);
    @include animation_show-rabbit(3s);
    @include rabbit-checkbox;
}
.layer-5 {
    z-index: 5;
    @include hill(220px, 290px, 0, 0);
}
.layer-6 {
    z-index: 6;
    @include rabbit(250px, 175px, 0);
    @include animation_show-rabbit(0.5s);
    @include rabbit-checkbox;
}
.layer-7 {
    z-index: 7;
    @include hill(200px, 195px, 100px, 0);
}
.layer-8 {
    z-index: 8;
    @include bush(120px, 100px, 0, 0);
    margin: 0 auto;
}
.layer-9 {
    z-index: 9;
    @include bush(140px, 80px, 200px, 0);
}
.layer-10 {
    z-index: 10;
    @include bush(130px, 80px, 0px, 0);
}

Bueno así me quedo !! aprendí demasiado 😄

Modificaciones realizadas 😃

.body{
	counter-reset: score;
}
.layer-1 input[type=checkbox]{
            animation-name: bunny;
            animation-duration: 1s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
}
@keyframes bunny{
            0%{
                top: 0;
            }
            25%{
                top: 80px;
            }
            100%{
                top: 0;
            }
}
input[type=checkbox]{
            appearance: none;
            cursor: pointer;
            height: 50px;
            margin: 0;
            position: relative;
            top: 0;
            width: 80px;
            z-index: 2;
 }
input[type=checkbox]:focus{
            appearance: none;
            outline: none;
        }

        input:checked{
            counter-increment: score;
        }

        .score::after{
            content: counter(score);
}