<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>
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; }