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 respuesta
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>
-
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? Commented el 1 may. 2018 a las 15:33
-