No tienes acceso a esta clase

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

Animation name y keyframe

5/13
Recursos

Aportes 12

Preguntas 4

Ordenar por:

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

o inicia sesi贸n.

鈽 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 鈥渃amino鈥 modifique al elemento. Adem谩s de que nosotros le decimos cuantos segundos tiene que durar ese 鈥渧iaje鈥.

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 鈥渃ambiocolor鈥 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馃

gracias por el cheat sheet