Animation name y keyframe

☝ Básicamente el uso de la directiva @keyframes te permite definir el comportamiento de tu animación punto por punto, y cualquier elemento puede usar esta animación por medio de la regla animation-name.
.
Dentro de @keyframes especificamos cada punto de nuestra animación por medio de porcentajes, por ejemplo, tomando en cuenta este ejemplo:
.

.
Podríamos tener un @keyframes de esta forma:
.

@keyframes jump {

    /* Punto A */
    0% {

    }

    /* Punto B */
    40% {

    }

    /* Punto C */
    60% {

    }

    /* Punto D */
    90% {

    }

}

.
Los porcentajes pueden ser los que tú quieras, pero lo más importante a tener en cuenta es que mientras más cerca esté un porcentaje de otro más rápido será la transición de un punto a otro 😄
.

Notas de la clase

Resumen de la clase

En esta clase vimos cual es la diferencia entre las animaciones y las transiciones, ya que uno se puede llegar a confundir bastante, esto debido a que ambas suenan bastante similar e incluso se podría llegar a pensar que son sinónimos.
.

Diferencia entre transiciones y animaciones

Las transiciones solo pueden ir de un punto A a uno B en determinado tiempo. Sin embargo, en las animaciones, en el lapso de tiempo que va del punto A al B (osea, en el punto intermedio), puede haber ciertos movimientos.
.

.

Keyframes

Entonces, sabiendo cual es la diferencia entre las animaciones y transiciones, es hora de saber como los @keyframes nos ayudan a animar a nuestros elementos.
.
Un keyframe no es mas que una linea del tiempo que empieza desde el punto A y termina en el punto B. Nosotros le podemos decir a ese keyframe en que parte del “camino” modifique al elemento. Además de que nosotros le decimos cuantos segundos tiene que durar ese “viaje”.

Si por alguna razón alguien tiene problema para aplicar propiedad de movimiento como translate o rotate y no les funciona prueba haciendo flex o grid al contenedor padre, me paso que estas propiedad no funcionaban cuando los contenedores padres eran block.

La propiedad animation en CSS permite crear animaciones y especificar cómo se anima un elemento. Una animación se compone de dos partes principales: animation-name y @keyframes.

La propiedad animation-name se utiliza para especificar el nombre de la animación que se va a aplicar al elemento. Este nombre se corresponde con el identificador del conjunto de reglas de @keyframes que se definirá a continuación. El valor que se asigna a animation-name debe coincidir exactamente con el nombre especificado en la regla @keyframes.

La regla @keyframes se utiliza para definir cómo debe animarse un elemento en distintos momentos durante la duración de la animación. Para hacer esto, se definen uno o más conjuntos de reglas que indican los estilos que deben aplicarse a un elemento en distintos porcentajes de la duración de la animación. Cada conjunto de reglas se identifica con un nombre único que se corresponde con el valor asignado a animation-name.

Por ejemplo, supongamos que se quiere crear una animación en la que un elemento cambie de color gradualmente. Se podría definir una animación llamada “cambiocolor” con la siguiente sintaxis:

@keyframes cambiocolor {
    0%   { background-color: red; }
    50%  { background-color: yellow; }
    100% { background-color: green; }
}

div {
    animation-name: cambiocolor;
    animation-duration: 3s;
}

En este ejemplo, se define un conjunto de reglas llamado cambiocolor que especifica que el elemento debe tener un fondo rojo al principio de la animación, cambiar a amarillo al llegar al 50% de la duración y finalmente terminar con un fondo verde. Luego, se aplica la animación al elemento div con la propiedad animation-name y se establece la duración de la animación en 3 segundos con la propiedad animation-duration.

En resumen, animation-name y @keyframes son dos partes esenciales para crear animaciones en CSS. La primera define el nombre de la animación que se va a aplicar, mientras que la segunda define cómo se debe animar el elemento en distintos momentos durante la duración de la animación.

5.-Animation name y keyframe

Animation puede tener solo un valor, o varios

• animation-name: Con esta le colocamos un nombre a la fracción de código que queremos animar, para que el keyframe sepa a quién debemos animar.
• keyframes: Se va de A a B con ciertas manipulaciones de por medio. Está es la diferencia crucial, que podemos manipular el tiempo desde el inicio hasta el final usando palabras clave como from y to para decir que solo desde el inicio hasta el final.

No es necesario llegar de 0 a 100.

Este es mi codigo creado hasta el momento

<!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>Juego</title>
    <style>
        .principal{
            width:500px;
            height:650px;
            background-color:#afafff;
            border-radius:10px;
            position:relative;
        }

        .capa-1{
            z-index: 1;
            width:100px;
            height:600px;
            position:absolute;
            right:120px;
            bottom:0px; 
            animation-name: subir-bajar, rotar-isquierda;
            animation-duration: 2s,2s;
            animation-iteration-count: infinite, infinite;
        }
        
        .capa-1 .left-ear{
            animation-name: move-ear-left;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        .capa-1 .eye{
            animation: scale-1-percent 4s infinite;
        }

        @keyframes scale-1-percent{
            0%{
                transform: scale(1); 
            }
            50%{
                transform: scale(1.01);
                
                border-bottom: 5px solid #00f;
            }
            100%{
                transform: scale(1);
            }
        }

        .capa-2 .right-ear{
            animation-name: move-ear-left;
            animation-duration: 1s;
            animation-iteration-count: infinite;
        }



        .capa-2{
            z-index: 2;
            width:100px;
            height:600px;
            position:absolute;
            left:120px;
            bottom:0px; 
            animation-name: subir-bajar;
            animation-duration: 4s;
            animation-iteration-count: infinite;
        }
        
        .capa-3{
            z-index: 3;
            width:60%;
            height:500px;
            position:absolute;
            left:20%;
            bottom:0px;
            background-color:#559955;
            border-radius:20px;
            text-align:center;
            box-shadow:inset 0px 20px 0px 0px #000;
        }

        
        .capa-4{
            z-index: 4;
            width:100px;
            height:400px;
            position:absolute;
            left:70px;
            bottom:0px; 
            animation-name: subir-bajar;
            animation-duration: 1s;
            animation-iteration-count: infinite;
        }

        
        .capa-5{
            z-index: 5;
            width:60%;
            height:300px;
            position:absolute;
            left:5%;
            bottom:0px; 
            background-color:#007700;
            border-radius:20px;
            text-align:center;
            box-shadow:inset 0px 20px 0px 0px #000;
        }
        
        .capa-6{
            z-index: 6; 
            width:100px;
            height:300px;
            position:absolute;
            right:70px;
            bottom:0px; 
            animation-name: subir-bajar;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            
        }

        
        .capa-7{
            z-index: 7; 
            width:60%;
            height:200px;
            position:absolute;
            right:5%;
            bottom:0px; 
            background-color:#559955;
            border-radius:20px;
            text-align:center;
            box-shadow:inset 0px 20px 0px 0px #000;
        }

        
        .capa-8{
            z-index: 8; 
            width:60%;
            height:100px;
            position:absolute;
            left:20%;
            bottom:0px; 
            
        }

        
        .capa-9{
            z-index: 9;
            width:40%;
            height:50px;
            position:absolute;
            left:0%;
            bottom:0px; 
            
        }

        
        .capa-10{
            z-index: 10; 
            width:40%;
            height:50px;
            position:absolute;
            right:0%;
            bottom:0px; 
        }

        .left-ear{
            height:50px;
            width:20px;
            background-color:#efefef;
            position:absolute;
            left:20px;
            top:0px;
            border-radius:90%;
        }
        .right-ear{
            height:50px;
            width:20px;
            background-color:#efefef;
            position:absolute;
            right:20px;
            top:0px;
            border-radius:90%;
        }
        .head{
            width:100px;
            height:100px;
            position:absolute;
            top:40px;
            left:0px;
            background-color:#ffffff;
            border-radius:100%;
        }
        .eye{
            width:7px;
            height:7px;
            background-color:#000;
            border-radius:4px;
        }
        .left-eye{ 
            position:absolute;
            left:25%;
            top:15px
        }

        .right-eye{ 
            position:absolute;
            right:25%;
            top:15px
        }
        .inner-ear{
            width:10px;
            background-color:pink;
            height:46px;
            border-radius:100%;
            position:absolute;
            left:5px
        }

        @keyframes subir-bajar{
            0%{
                bottom:-50px;
            } 
            50%{
                bottom:0%;
            }
            100%{
                bottom:-50px;
            }
        }
        @keyframes rotar-isquierda{
            0%{
                transform: rotate(0deg);
            }
            50%{
                transform : rotate(10deg);
            }
            100%{
                transform : rotate(0deg);
            }
        }

    
        .clouds-layer1{
            width:100%;
            height:30px;
            border-radius:20px;
            background:#fff;
            position:absolute;
            top:25%;
            left:0;
            z-index:1
        }
        .clouds-layer2{
            width:50%;
            height:30px;
            border-radius:20px;
            background:#eef; 
            position:absolute;
            top:0%;
            left:25%;
            z-index:2
        }

        
        .three-layer1{
            width:100%;
            height:30px;
            border-radius:20px;
            background:#0f0;
            position:absolute;
            top:25%;
            left:0;
            z-index:1
        }
        .three-layer2{
            width:50%;
            height:30px;
            border-radius:20px;
            background:#5d5; 
            position:absolute;
            top:0%;
            left:25%;
            z-index:2
        }
         

        .cloud-left{
            animation: mover-nubes-isquierda 30s infinite;
        }
        .cloud-right{
            animation: mover-nubes-derecha 30s infinite;
        }
      
        
 

        @keyframes mover-nubes-derecha{
            0%{
                translate:0px; 
            }
            50%{
                translate:100px; 
            }
            100%{
                translate:0px; 
            }
        }
        @keyframes mover-nubes-isquierda{
            0%{
                translate:100px; 
            }
            50%{
                translate:0; 
            }
            100%{
                translate:100px; 
            }
        }

        .green-grass{
            width:0;
            height:0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 20px solid #33ff33;
            display:inline-flex;
        }


        @keyframes move-ear-left{
            0%{
                transform: rotate(0deg);
            }
            50%{
                transform : rotate(10deg);
            }
            100%{
                transform : rotate(0deg);
            }
        }
    </style>
</head>
<body>
    

    <div class="principal">
        <div class="capa-1">
                <div class="left-ear">
                    <div class="inner-ear"></div>
                </div>
                <div class="right-ear">
                    <div class="inner-ear"></div>    
                </div>
                <div class="head">    
                    <div class="eye right-eye"></div>
                    <div class="eye left-eye"></div>
                </div>
        </div>
        <div class="capa-2">
                <div class="left-ear">
                    <div class="inner-ear"></div>
                </div>
                <div class="right-ear">
                    <div class="inner-ear"></div>    
                </div>
                <div class="head">    
                    <div class="eye right-eye"></div>
                    <div class="eye left-eye"></div>
                </div>
            </div>
        <div class="capa-3">
        
            <div class="green-grass"></div>
            <div class="green-grass"></div>
            <div class="green-grass"></div>
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div>  
            
        </div>
        <div class="capa-4">
            <div class="left-ear">
                <div class="inner-ear"></div>
                </div>
                <div class="right-ear">
                    <div class="inner-ear"></div>    
                </div>
                <div class="head">    
                    <div class="eye right-eye"></div>
                    <div class="eye left-eye"></div>
                </div>
            </div>
        <div class="capa-5">
            <div class="green-grass"></div>
            <div class="green-grass"></div>
            <div class="green-grass"></div>
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div>      
        </div>
        <div class="capa-6">
                <div class="left-ear">
                    <div class="inner-ear"></div>
                </div>
                <div class="right-ear">
                    <div class="inner-ear"></div>    
                </div>
                <div class="head">    
                    <div class="eye right-eye"></div>
                    <div class="eye left-eye"></div>
                </div>
            </div>
        <div class="capa-7">
            <div class="green-grass"></div>
            <div class="green-grass"></div>
            <div class="green-grass"></div>
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div> 
            <div class="green-grass"></div>  
        </div>
        <div class="capa-8">
            
            
            <div class="three-layer1"></div>  
            <div class="three-layer2"></div>        

            </div>
        <div class="capa-9"> 
                <div class="clouds-layer1"></div>  
                <div class="clouds-layer2"></div>         
        </div>
        <div class="capa-10">     
            <div class="clouds-layer1"></div>  
                <div class="clouds-layer2"></div>        
        </div>
    </div>
</body>
</html>

Me parece muy útil y necesario el documento Animations Cheat Sheet 😃 Muchísimas gracias🤗

Teoría Animation

gracias por el cheat sheet