Introducción

Hoy te contaré cómo hacer animación. Veremos todas las propiedades de animación necesarias en esta publicación. Puedes obtener el código en mi github. ¡¡Entonces empecemos!!

Animación

La animación es la propiedad que se utiliza para mejorar el aspecto del sitio web. Proporciona una agradable interferencia al usuario y también sirve para mostrarle a la gente el objetivo del sitio web.

Una animación básica

Primera animación: cambiando el color de un cuadrado.

Square

Aquí hago un cuadrado de color azul y luego le doy algunos estilos. ¡Puedes elegir cualquier color!

#square{
    position: relative;
    width: 8rem;
    height: 8rem;
    background-color: rgb(14, 202, 202);
    border-radius: 5px;
    margin: 3rem 0 0 3rem;
    text-align: center;
}

Ahora haremos una animación.

Paso 1: Hacer animación @keyframes

Para hacer una animación, debes configurar @keyframes. Contiene los estilos que desea darle a su elemento en un momento determinado y luego debe darle un nombre. En mi caso estoy cambiando el color del cuadrado. Entonces, le doy un color de nombre. Ahora puedes escribir @keyframes en dos tipos como

@keyframes color{
    from{
        background-color: rgb(14, 202, 202);
    }
    to{
        background-color: pink;
    }
}

Si desea realizar una animación que tenga dos pasos, puede usar hacia y desde. O puedes hacerlo usando un valor porcentual como

@keyframes color{
    0%{
        background-color: rgb(14, 202, 202);
    }
    100%{
        background-color: pink;
    }
}

Los valores porcentuales se usan cuando tienes que realizar varias tareas en la animación, ¡pero puedes usar ambas! Normalmente uso valores porcentuales para una animación

Paso 2: establece la propiedad de animación en el cuadrado.

Ahora, animaremos la propiedad en el cuadrado. Para ello necesitas conocer las propiedades de la animación. Te diré los que más se usan:

• nombre-animación: se utiliza para indicarle al navegador qué @keyframes desea utilizar. En mi caso, mi nombre @keyframes es color.

• duración de la animación: se utiliza para indicar en cuánto tiempo debe finalizar la animación.

• animation-iteration-count: se utiliza para indicar cuántas veces debe ejecutarse.

Puedes aprender más sobre animación en w3school o en cualquier otro sitio web. Ahora usaremos la propiedad de animación pero la escribiremos en una sola línea como esta:

    animation: color 4s infinite;

Hay 7 propiedades en animación en CSS. Para usar la propiedad de animación en una sola línea, primero escribo el nombre de la animación, que es color, luego la duración de la animación, que en mi caso es 4 segundos y luego configuro el recuento de iteraciones de animación en infinito. Si desea utilizar la animación solo una vez, puede configurarla en 1. También puede establecer los valores de la propiedad de animación usted mismo.

Ahora, si ves tu cuadrado, ¡cambiará de color una y otra vez! Ahora, haremos que el cuadrado se mueva mientras cambiamos el color.

Segunda animación: ¡Mover el cuadrado mientras cambia el color!

Para eso usaré el mismo cuadrado y haré otro @keyframes para eso. Usaremos los mismos pasos que antes

Paso 1: Hacer animación @keyframes

@keyframes move{
    0%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }50%{
        left: 300px;
        background-color: pink;
    }100%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }
}

Aquí, hago un @keyframes con el nombre mover y utilizo tres pasos para esta animación. Primero configuré la izquierda en 0px y un color de fondo. Luego, al 50%, configuro la izquierda en 300 px y cambio el color de fondo y, por último, configuro nuevamente la izquierda en 0 px, para que aparezca en la primera posición.

Paso 2: Establecer la propiedad de animación en el cuadrado

    animation: move 4s infinite;

Aquí, configuro el nombre de la animación para que se mueva, luego la duración de la animación en 4 segundos y el recuento de iteraciones de la animación en infinito. Nuevamente puede configurar el valor de la animación según su elección. ¡Y tampoco olvides comentar la primera propiedad de la animación o las cosas pueden salir mal!

Conclusión

Como la publicación ya es demasiado larga, la continuaremos en otra publicación. Por ahora, es suficiente por hoy. Espero que lo entiendas. Hago lo mejor que puedo para contar todas las cosas sobre la animación. Y también dime en los comentarios sobre qué tema debería escribir mi próximo post. ¡Gracias por leer!