Использование transition-timing-function

by webref

HTML

<main>
  <p><strong>ease</strong>: медленно начинается, быстро в середине, медленно завершается</p>
  <div class="ease"></div>
  <p><strong>linear</strong>: постоянная скорость</p>
  <div class="linear"></div>
  <p><strong>ease-in</strong>: медленно начинается, быстро завершается</p>
  <div class="ease-in"></div>
  <p><strong>ease-out</strong>: быстро начинается, медленно завершается</p>
  <div class="ease-out"></div>
  <p><strong>ease-in-out</strong>: похоже на ease, но с более выраженным ускорением/замедлением</p>
  <div class="ease-in-out"></div>
</main>

CSS

div {
  left: 0;
  height: 20px;
  width: 20px;
  position: relative;
  transition: 1s;
}

main:hover div {
  left: 300px;
}

.ease {
  transition-timing-function: ease;
}


/* Поведение по умолчанию */

.linear {
  transition-timing-function: linear;
}


/* Постоянная скорость */

.ease-in {
  transition-timing-function: ease-in;
}

.ease-out {
  transition-timing-function: ease-out;
}

.ease-in-out {
  transition-timing-function: ease-in-out;
}

div:nth-child(2) {
  background: crimson;
}

div:nth-child(4) {
  background: midnightblue;
}

div:nth-child(6) {
  background: mediumseagreen;
}

div:nth-child(8) {
  background: orangered;
}

div:nth-child(10) {
  background: darkviolet;
}