Свойство transition относится к новым свойствам CSS3.
Плавные переходы в CSS или "transitions" позволяют изменять значения свойств постепенно, «с нежностью». Обычно эффект от изменения значений CSS-свойств виден мгновенно, но с помощью плавных переходов можно изменить это поведение и сделать процесс изменения значений плавным и без использования JavaScript.
В отличие от анимаций, которые позволяют управлять любым количеством промежуточных состояний, с помощью переходов можно управлять только переходом между двумя состояниями: начальным и конечным.
Применять свойство transition можно к чему угодно — фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы :focus и :active.
Существует четыре отдельных свойства.
А также есть укороченная запись, вмещающая все свойства - transition.
Общий синтаксис.
.элемент {
переход: [свойство] [продолжительность] [легкость] [задержка]
}
.element {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]
}
Чтобы обозначить плавный переход в CSS, достаточно задать одно свойство: transition-duration — длительность перехода. Значения задаются в секундах (10s, 3s), долях секунды (0.1s, 0.03s) или миллисекундах (100ms, 333ms).
Зададим разные цвета и размеры шрифта, а для анимации установим длительность в 3 секунды. Анимацию добавим в двух местах, чтобы она происходила как при наведении мыши на блок, так и при убирании мыши.
.t1 {
width: 100px;
height: 50px;
color: white;
background-color: green;
transition-duration: 3s;
text-align: center;
font-size: 16px;
}
.t1:hover {
background-color: red;
transition-duration: 3s;
font-size: 19px;
}
Если задана только длительность перехода transition-duration, то по умолчанию плавное изменение затрагивает все свойства элемента и для всех свойств происходит одновременно. Такое поведение соответствует значению all свойства transition-property.
Такое поведение часто нежелательно, особенно когда в правиле много свойств. Можно указать, какие именно свойства нужно изменять плавно, перечислив их в transition-property через запятую:
transition-property: width; // плавно меняется только ширина
transition-property: width, height; // плавно меняются только ширина и высота
При этом так же через запятую можно задавать переходам разных свойств разную длительность:
transition-property: width, height;
transition-duration: 1s, 5s; // ширина меняется за 1 секунду, высота за 5
Если брать предыдущий пример, то возможно мы хотим применить анимацию только для фона, но не анимировать размер шрифта.
.t2 {
width: 100px;
height: 50px;
color: white;
background-color: green;
transition-duration: 3s;
transition-property: background-color;
text-align: center;
font-size: 16px;
}
.t2:hover {
background-color: red;
font-size: 19px;
transition-duration: 3s;
transition-property: background-color;
}
Ещё одно свойство переходов — transition-delay определяет задержку перед началом перехода и задаётся в секундах или миллисекундах.
Можно указывать и отрицательные значения. Задержка применима к отдельным элементам, в этом случае значения указываются через запятую в том же порядке, как у transition-property. Также можно добиться интересного результата, если указать много свойств у transition-property и два значения у transition-delay. В этом случае к нечётным свойствам будет применяться первое значение, а к чётным - второе.
Создадим анимацию, которая будет работать через полсекунды после наведения мышки.
.t3
{
width: 100px;
height: 50px;
color: white;
background-color: green;
padding: 5px 10px;
color: white;
transition-duration: 1s;
transition-delay: 0.5s;
}
.t3:hover
{
background-color: red;
color: #fff;
}
Свойство transition-timing-function определяет с какой скоростью и ускорением будут меняться свойства во время перехода. Содержит несколько значений.
See the Pen CSS Transition Timing Functions (no cubic) by Zell Liew (@zellwk) on CodePen.
Названия linear, ease и другие — это «псевдонимы» функций кубических кривых Безье:
В общем представлении cubic-bezier(x1, y1, x2, y2) значения x и y — это координаты точек кривых на графике. При этом верным считается значение x только в диапазоне от 0 до 1.
Сервис http://cubic-bezier.com/#.17,.67,.83,.67 поможет разобраться в функциональном представлении кривых Безье.
На странице http://easings.net/ru можно найти целую коллекцию разных easing-функций на основе кривых Безье.
C помощью функции cubic-bezier мы можем задавать любые формы переходов.
Ещё один возможный класс значений transition-timing-function — это steps, позволяющий задать «ступеньки», по которым будет идти переход.
transition-timing-function: steps(число_шагов, направление);
Число_шагов — это целое число, за которое будет выполнен переход; направление может принимать значение start или end. При заданном start первый шаг выполняется одновременно с началом перехода, а в случае c end последний шаг будет выполнен вместе с завершением перехода.
Пример применения steps - анимация спрайта.
Слайдер при помощи свойства CSS3 transition, где при помощи CSS и без всякого JavaScript удалось создать симпатичный слайдер.
Вернуться в раздел CSS