5

Quisiera que me dieran una explicación de cada una de las propiedades que tiene la propiedad transition (ease, linear, ease-in, ease-out, ease-in-out) y en que caso o situaciones conviene usar una u otra, en el caso de la propiedad "linear" se que la transición comenzara de tal forma mencionada partiendo de cualquier parte de la pantalla (top,bottom,left,right) pero es la única propiedad de la que tengo idea por ende desconozco la utilidad que tienen las demás propiedades.

1

1 respuesta 1

5

ease-in comenzará la animación lentamente y finalizará a toda velocidad.

ease-out iniciará la animación a toda velocidad, luego terminará lentamente.

ease-in-out comenzará lentamente, será más rápido en el medio de la animación y luego terminará lentamente.

ease es como easy-in-out, excepto que comienza ligeramente más rápido de lo que termina.

linear no usa relajación.

.transition{
  width: 150px;
  height: 70px;
  background-color: #ddd;
  margin: 5px;
}

.transition:hover{
  width: 300px;
  height: 140px;
  background-color: #333;
}

.Ease{
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -ms-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}

.Linear{
  -webkit-transition: all 3s linear;
  -moz-transition: all 3s linear;
  -ms-transition: all 3s linear;
  -o-transition: all 3s linear;
  transition: all 3s linear;
}

.Ease-In{
  -webkit-transition: all 3s ease-in;
  -moz-transition: all 3s ease-in;
  -ms-transition: all 3s ease-in;
  -o-transition: all 3s ease-in;
  transition: all 3s ease-in;
}

.Ease-Out{
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -ms-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
}

.Ease-In-Out{
  -webkit-transition: all 3s ease-in-out;
  -moz-transition: all 3s ease-in-out;
  -ms-transition: all 3s ease-in-out;
  -o-transition: all 3s ease-in-out;
  transition: all 3s ease-in-out;
}
<div class="transition">Sin efecto</div>
<div class="transition Ease">Ease</div>
<div class="transition Linear">Linear</div>
<div class="transition Ease-In">Ease-In</div>
<div class="transition Ease-Out">Ease-Out</div>
<div class="transition Ease-In-Out">Ease-In-Out</div>

2
  • Ok entiendo perfectamente, pero aplicando estos valores a una propiedad de animacion ("animation") y ya no a una de transición ("transition") estos valores actuarían de la misma manera en la propiedad "animation" o sufrirían algún cambio?
    – Sasori1264
    Commented el 1 may. 2018 a las 15:33
  • Claro, siempre se sepa aplicar. Commented el 2 may. 2018 a las 21:02

Tu Respuesta

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

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