Подберите функцию плавности cubic-bezier с предпросмотром.
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);Функция cubic-bezier задаёт, как меняется скорость анимации во времени: плавный старт, резкое ускорение или отскок. Это то, что отличает «живую» анимацию от механической. Инструмент позволяет настроить кривую визуально и получить значение для свойства transition или animation.
Стандартные ease, ease-in, ease-out — это частные случаи cubic-bezier. Перетаскивая контрольные точки, можно создать собственную кривую под нужный характер движения. Значение вида cubic-bezier(0.25, 0.1, 0.25, 1) копируется прямо в CSS.
ease-in — медленный старт и ускорение к концу, ease-out — быстрый старт и замедление. ease-out часто ощущается естественнее для появления элементов.
Да, если вынести контрольную точку за пределы диапазона по вертикали — кривая выйдет за 0–1 и анимация «перепрыгнет» цель и вернётся.
В свойство transition или animation-timing-function, например: transition: all .3s cubic-bezier(.25,.1,.25,1).
Линейные градиенты с предпросмотром.
CSS-тени с живым предпросмотром.
Скругление углов с предпросмотром.
Контраст цветов по стандарту WCAG.
Оттенки и тона из базового цвета.
Иконки сайта всех размеров из картинки.