No tienes acceso a esta clase

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

Animation direction, fill mode y play state

8/13
Recursos

En esta clase, hablaremos de 3锔忊儯 propiedades que nos hacen falta para el tema de las animaciones que son:

馃搷 Animation direction 馃搷 Animation fill mode 馃搷 Animation play state

Las cuales veremos en un instante.

Propiedades 馃幆

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)

Una vez tengamos aplicada estas 煤ltimas propiedades, tendr铆amos listo nuestro proyecto, el cual podr谩s verlo aqu铆{target="_blank"}.

Hemos visto en este m贸dulo, much铆simas propiadades para terminar nuestra animaci贸n. Falta muy poco para terminar 馃帄.

Solo nos faltar铆a un 煤ltima detalle que ser铆a el tema del rendimiento.

Nos vemos en la siguiente articlase 馃挌.

Fuentes

Contribuci贸n creada con los aportes de: Jes煤s Vel谩zquez Jim茅nez y Angel David Osorio Leyva.

Aportes 51

Preguntas 14

Ordenar por:

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

o inicia sesi贸n.

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

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

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

Realice un juego con las animaciones:

Pagina web

Git hub

Espero les sirva.

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

Animatioland Game

GitHub | CodePen

No explic贸 nada xd

Muy triste con estas clases鈥 馃槮 Amo los proyectos que hacen nuestros compa帽eros y es gracias a sus contribuciones que he aprendido mucho pero que pesar que las clases esten tan desorganizadas y que el c贸digo se explique a medias. El proyecto es genial y esta bien que terminemos como estudiantes ciertas cosas pero hay algo que falla en la clase.

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, 鈥減uede 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.

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

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

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

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.

ahora si hechos los cambios

github y la page

As铆 nomas quedo. En el gif no se ve muy bien pero yo muevo el mouse picando los 鈥渂otones鈥 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)

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.

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

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

Hola compa帽eros, 馃槬 A m铆 tambi茅n me sucedi贸 que si pon铆a el input arriba de los divs del conejo, 馃惏 desaparec铆an las orejas o se deformaban y eso me sucedi贸 por seguir a la profesora y entr茅 en crisis muchas veces antes de encontrar la soluci贸n, lo que sucede es que en los videos la profesora no agrega una propiedad, que si est谩 en el ejercicio final y esto nos ocasion贸 problemas.

          .right-ear--outer {
           background: var(--bunny-skin);
           border-radius: 90%;
           top: 0; /*NO AGREGA ESTA*/
           width: 20px;
           height: 50px;
           position: absolute;
           right: 10px;
           } 
Por como dise帽茅 el html, los input ya se mov铆an con el div aksldjakldjsa

me quedo culerisimo el dise帽o jajaja

Es importante tener en cuenta que:
counter() y counter-increment trabajan en conjunto para lograr la numeraci贸n deseada. Por lo tanto, es necesario que el elemento que contiene la funci贸n counter() est茅 despu茅s del elemento con la propiedad counter-increment para que la numeraci贸n se realice correctamente

Asi me qued贸鈥 falta pulir las sombras 馃槂. Los pandas est谩n saltando y el score cuenta los checked.

Aqu铆 tengo el mio: CodePen
Y la imagen:

Esta clase es una verg眉enza, no se explica nada y aparece c贸digo m谩gicamente.

Hola鈥 les comparto mi Atrapa Conejos鈥 Quiero a帽adir un cron贸metro para hacerlo m谩s interesante鈥
https://libian19.github.io/animaciones-css/atrapaConejos.html

todo lo que necesites saber sobre esta clase que NO SE EXPLICO lo encuentras aqu铆 en esta gu铆a https://www.w3schools.com/css/css3_animations.asp

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

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