I would like you to give me an explanation of each of the properties that the transition property has (ease, linear, ease-in, ease-out, ease-in-out) and in which case or situations it is convenient to use one or the other , in the case of the "linear" property, the transition will begin in such a way starting from any part of the screen (top, bottom, left, right) but it is the only property of which I have an idea, therefore I do not know the utility that have the other properties.
ease-in will start the animation slowly and end at full speed.
ease-out will start the animation at full speed, then it will end slowly.
ease-in-out will start slowly, it will be faster in the middle of the animation and then it will end slowly.
ease is like easy-in-out, except that it starts slightly faster than it ends.
linear does not use relaxation.
.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>