Animaciones para la web tutorial

Transiciones: Una transición sucede cuando existe un cambio en una o mas propiedades de una clase en css.

• Transition-Duration: indica el tiempo que dura la transición de una propiedad.
• Transition-Propiety: indica la propiedad de la clase que sufrirá el cambio en la transición.
• Transition-delay: indica cuanto se tardara en iniciar la transición.
• Transition-timing-function: indica la velocidad de la transición, las cuales son:
  Linear: Sin acelaracion.
  Ease: con aceleración.
  Steps(): la aceleración será por fps.

Nota: los tiempos en las transiciones(duración y delay) se define en segundos y milisegundos.

/*duracion de la transicion en segundos*/
    transition-duration:.3s ;

    /*retraso de la transicion*/
    transition-delay: .3s;

    /*propiedad que se modifica*/
    background-color: black;
    transition-property:background-color; 

    /*aceleracion de la transicion*/
    transition-timing-function: ease-in-out;

Animaciones
Para crear animaciones en css se utiliza la propiedad animation y las sub-propiedades.

Animation-name: indica el nombre de la animación.

Animation-direction: indica donde comenzara la animación si en el inicio o el final de la misma.

Animation-play-states: Permite pausar o reanudar la animación cuando se hace hover.

Animation-iteration-count: indica las veces que se repetirá la animación.

Animation-fill-mode: indica el valor que tendrá el elemento al finalizar la animación. Estas pueden ser:

• Forwards: el objeto se queda con los estilos finales de la que se aplicaron en la animación.

• Backwards: El objeto se queda con los estilos que tenía al principio de la animación.

Animation-timing-funtion:indica la aceleración de la animación. Las aceleración se pueden modificas con la curva de brazier y los steps:

• Curva de brazier: nos permite generar nuestra propia curva de movimiento a partir de 4 parametros entre 0 y 1.

• Steps: funcionan con los números de frames por segundo.

.Elemento{
    /*nombre de la animacion*/
    animation-name: animacion;

    /*direccion de la animacion*/
    animation-direction:normal;

    /*estado final del elemento*/
    animation-fill-mode: forwards;

    /*repeticiones de la animacion*/
    animation-iteration-count: infinite;

    /*aceleracion de la animacion con curva de brezier*/
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
}

@keyframes animacion{
    0%{
        transform: translate(0px);
    }
    100%{
        transform: translate(130px);
    }

}

Animaciones en Js
Para crear animaciones en js se utiliza el metodo animate

Sintaxis: Elemento.animate(keyframes=[array], options={objetos});

  const $pelota=document.getElementById('pelota');
        const $play=document.getElementById('play');
        const $stop=document.getElementById('stop');
        const $reverse=document.getElementById('reverse');
        
        const animacion= $pelota.animate([{
            //keyframes
            transform:'translateX(0)'},
            {transform:'translateX(600px) rotate(500deg) translateZ(200px)'}],
            
            //options
            {
            duration:2000,
            direction:'alternate',
            iterations:Infinity,
            easing:'linear',
            fill:'forwards',
            delay:1000,
        })
        $stop.addEventListener('click',(event)=>{
            animacion.pause();
        })
        $play.addEventListener('click',(event)=>{
            animacion.play();
        })
        $reverse.addEventListener('click',(event)=>{
            animacion.reverse();
        })