Animation direction, fill mode y play state

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

ericgomez

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.

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

Paul Isaac Guala Bravo

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

Julio Loarte Huerto

Realice un juego con las animaciones:

Pagina web

Git hub

Espero les sirva.

Ricardo Rito Anguiano

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

Fabián Andrés Pacherres Bautista

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

Oriol Fernando Palacios Durand

No explicó nada xd

Laura Roa

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.

Edwin Jesús

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.

Lina María Ureña Bolívar

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

Juan David González Rodríguez

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

.phone{
	overflow: hidden;
}

body{
	overflow: hidden;
}

Obed Paz

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

Jeans Pierre Monrroy Caicedo

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.

marco antonio

ahora si hechos los cambios

github y la page

Irving Juárez

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

Jesús Velázquez Jiménez

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)

Edwin Steven Ortega Tejada

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

Sura Naileth Cedeño Lopez

Platzi Team

Listo , listo

Christian Boffill

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.

cecimontana

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

Víctor Hugo Torres Fierro

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

Julio Bastidas

hace un mes

quede esperando por la aplicacion del direction, fill mode y play state, se menciono mas no se coloco codigo

humbertopeaton

hace 8 meses

Una consulta, cuando utilizamos `animation-fill-mode: forwards;` `Dando de ejemplo cuando se hace hover, y aun no dejamos de hacerlo y la animacion ya termina, con la propiedad quedaria en su estado final.` `Sin embargo, cuando dejamos de hacer hover, el cambio es abrupto, me refiero a que del estado final que se encuentra al inicial es muy rapido. Eso como podria animarse y que se vea suena?`

Jesús Antonio

hace 9 meses

![](https://static.platzi.com/media/user_upload/image-3652ccbd-4a8d-4460-9108-f7ff4ce926e9.jpg)Este es mi diseño

Raymondi Alejandro Ramos Vásquez

Por como diseñé el html, los input ya se movían con el div aksldjakldjsa

jonatan eduardo constantino prado

me quedo culerisimo el diseño jajaja

Mateo Roldán Escobar

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

Jose Angel Esquivel Cisneros

Abigail Nahomi Chávez Lozano

Asi me quedó… falta pulir las sombras 😃. Los pandas están saltando y el score cuenta los checked.

Luis Miguel Vasquez Alvarez

Norma Angelica

Aquí tengo el mio: CodePen
Y la imagen:

Sebastián Pizarro

Esta clase es una vergüenza, no se explica nada y aparece código mágicamente.

Libian María Hernández Gil

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

N40 M10

Andres Calixto Benites

https://drive.google.com/file/d/1Re--gM-k3UEACJ9lF-Pfu9Rf7u_Yn9rj/view?usp=sharing

Terminado.

John Orellana

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

Jose Bernabe Rios Nuñez

Me gusto mucho este curso, este es mi proyecto:

Julian Franco

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

Samuel Espinoza Figueroa

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

Cristian Contreras

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

Alejandro Sebastian Dubon Estrada

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>

Cristian David Casallas Velandia

Comparto mi trabajo:
https://cricadev.github.io//Desktop/curso-animations-css/stacking-layer.html

Gustavo Gonzalez Montero

Así va por el momento:

Ricardo Martin

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>

Ricardo Tapia Knight

🐇🐇🐇🐇

Jesus Gabriel Nizama Guevara

https://gabrielnizama.github.io/Curso-de-Animaciones-con-CSS/ asi quedó mianimación

KEGOVC

<!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>

Shuriko Alzate

Reynaldo Salazar

/* @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).

Juan David González Rodríguez

Bueno así me quedo !! aprendí demasiado 😄

Paolo Joaquin Pinto Perez

Sebastian Heredia