4

Tengo bien claro que animation y transition son para realizar animaciones, pero...

Supongamos que quiero mover un elemento de izquierda a derecha, con ambas se puede hacer.

Ejemplo con animation:

document.getElementById('button').onclick = e => {
  document.getElementById('img').classList.add('move');
}
#img {
  position: relative;
  height: 50px;
}
@keyframes move {
  0% { left: 0; }
  100% { left: 200px; }
}
.move {
  animation: move 2s forwards;
}
<img id="img" src="https://a.imge.to/2019/08/11/fjHnk.th.jpg"/><br/>
<button id="button">Mover</button>

Ejemplo con transition:

document.getElementById('button').onclick = e => {
  document.getElementById('img').classList.add('move');
}
#img {
  position: relative;
  height: 50px;
  left: 0;
  transition: left 2s;
}
#img.move {
  left: 200px;
}
<img id="img" src="https://a.imge.to/2019/08/11/fjHnk.th.jpg"/><br/>
<button id="button">Mover</button>


  • ¿En algún momento conviene usar una o la otra?
  • ¿Qué ventaja que tiene una sobre la otra?

1 respuesta 1

4

Animaciones CSS

Una animación contiene las siguientes propiedades:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

Entonces observamos lo siguiente:

Una animación aplicada a un elemento o un grupo de elementos puede no solo contener: dirección, tiempo y frecuencia.

Por ejemplo en el siguiente fragmento animamos con un giro infinito a la figura que se encuentra por dentro del círculo:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Animación</title>
      <style>
        #circulomayor{
          width: 150px;
          height:150px;
          background-color: crimson;
          border-radius: 50%;
          position: relative;
        }
        #circulomenor{
          width: 50px;
          height: 50px;
          background-color: tomato;
          border-radius: 50px 100px 20px;
          position: absolute;
          top: 35px;
          left: 45px;
          animation: girar 2s linear infinite;
        }
        
        @keyframes girar{
          from{
            transform: rotate(0deg);
          }
          to{
            transform: rotate(360deg);
          }
        }
      </style>
    </head>
    <body>
    <div id="circulomayor">
      <div id="circulomenor"></div>
    </div>
    </body>
    </html> 

Entonces una animación nos permite establecer comportamiento complejo e iterable de distintos elementos en la pantalla.

Las animaciones de diferencia de las transiciones poseen su paso de un estado inicial a un estado final con un intermedio entre ellas a través de fotogramas los cuales ayudan a indicar comportamientos específicos entre el inicio y el fin de ambos estados.

Por eso para establecer el comportamiento de todos los fotogramas poseemos una regla llamada keyframes en la cual por dentro podemos indicar el comportamiento que cada paso de la animación tendrá:

Por ejemplo:

@keyframes mianimacion {
   from{
     //estado inicial
   }
   to{
     //estado final
   }
}

Incluso que se disparen por la interacción de un usuario, por ejemplo que la animación anterior ocurra cuando el usuario haga :hover sobre el elemento del DOM.

#circulomenor:hover{
  animation: girar 2s linear infinite;
}

Transiciones CSS

Las transiciones en CSS, poseen las siguientes propiedades:

  • transition-duration
  • transition-timing-function
  • transition-delay
  • transition-property

Donde estas solo nos permiten tener 2 estados, uno inicial y uno final sin efectos de animación intermedia.

Para el ejemplo anterior, lo que obtendríamos sería algo similar a esto:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Otro mas</title>
      <style>
        #circulomayor{
          width: 150px;
          height:150px;
          background-color: crimson;
          border-radius: 50%;
          position: relative;
        }
        #circulomenor{
          width: 50px;
          height: 50px;
          background-color: tomato;
          border-radius: 50px 100px 20px;
          position: absolute;
          top: 35px;
          left: 45px;
        }
        #circulomenor:hover{
          background-color: green;
          transition: background-color 3s ease-in;
        }
    
      </style>
    </head>
    <body>
    <div id="circulomayor">
      <div id="circulomenor"></div>
    </div>
    </body>
    </html>

Donde cambiamos el color de fondo por medio de la propiedad transition indicando la propiedad afectada, la duración de la transición y la regularidad con la cual se visualizará.

Entonces podemos identificar que:

  • Las animaciones permiten generar comportamientos intermedios entre el estado inicial y final de la misma, con ayuda de los keyframes que generan fotogramas
  • La cantidad de propiedades para aplicar efectos en una transición son menores en comparación con una animación.
  • Probablemente para igualar una transición a nivel de keyframes con respecto de una animación deberemos aplicar el uso de JavaScript
  • Puedes elegir usar transiciones cuando no requieras de puntos intermedios específicos de animación a los elementos y en cambio solo sea mostrar un estado incial y final
0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.