Переход (transition) представляет анимацию от одного стиля к другому в течение определенного периода времени.
Для создания перехода необходимы прежде всего два набора свойств CSS: начальный стиль, который будет иметь элемент в начале перехода, и конечный стиль - результат перехода. Так, рассмотрим простейший переход:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Переход в CSS3</title>
<style>
div{
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
transition-property: background-color;
transition-duration: 2s;
}
div:hover{
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Итак, здесь анимируется свойство background-color элемента div. При наведении указателя мыши на элемент он будет менять цвет с серого на красный.
А при увеении указателя мыши с пространства элемента будет возвращаться исходный цвет.
Чтобы указать свойство как анимируемое, его название передается свойству transition-property
transition-property: background-color;
Вообще анимировать можно множество разных свойств, такие как color, background-color, border-color. Полный список свойств CSS, которые поддаются анимации, можно найти по адресу www.w3.org/TR/css3-transitions/#animatable-properties
Далее идет установка времени перехода в секундах с помощью свойства transition-duration:
transition-duration: 2s;
Кроме секунд можно устанавливать значения в миллисекундах, например, 500 миллисекунд:
transition-duration: 500ms;
И в конце нам надо определить инициатор действия и финальное значение анимируемого свойства background-color. Инициатор представляет действие,
которое приводит к изменению одного стиля на другой. В CSS для запуска перехода можно применять псевдоклассы. Например, здесь для создания перехода используется стиль для
псевдокласса :hover. То есть при наведении указателя мыши на элемент div, будет срабатывать переход.
Кроме псевдокласса :hover можно использовать и другие псевдоклассы, например, :active (ссылка в нажатом состоянии) или
:focus (получение элементом фокуса).
Также для запуска перехода можно использовать код JavaScript.
При необходимости мы можем анимировать сразу несколько свойств CSS. Так, в выше приведенном примере изменим стили следующем образом:
div{
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
transition-property: background-color, width, height, border-color;
transition-duration: 2s;
}
div:hover{
background-color: red;
width: 120px;
height: 120px;
border-color: blue;
}
Здесь анимируются сразу четыре свойства. Причем анимация для них всех длится 2 секунды, но мы можем для каждого свойства задать свое время:
transition-property: background-color, width, height, border-color; transition-duration: 2s, 3s, 1s, 2s;
Подобно тому как в свойстве transition-property через запятую идет перечисление анимируемых свойств, в свойстве transition-duration
идет перечисление через запятую временных периодов для анимации этих свойств. Причем сопоставление времени определенному свойству идет по позиции, то есть свойство
width будет анимироваться 3 секунды.
Кроме перечисления через запятую всех анимируемых свойств мы можем просто указать ключевое слово all:
transition-property: all; transition-duration: 2s;
Теперь будут анимироваться все необходимые свойства, которые меняют значения в стиле для псевдокласса :hover.
Свойства transition-timing-function позволяет контролировать скорость хода и выполнение анимации. То есть данное свойство отвечет за то, как и в какие моменты времени анимация будет ускоряться или замедляться.
В качестве значения это свойство может принимать одну из функций:
linear: линейная функция плавности, изменение свойства происходит равномерно по времени
ease: функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение
ease-in: функция плавности, при которой происходит только ускорение в начале
ease-out: функция плавности, при которой происходит только ускорение в конце анимации
ease-in-out: функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение
cubic-bezier: для анимации применяется кубическая функция Безье
Применим функцию ease-in-out:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Переход в CSS3</title>
<style>
div{
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
transition-property: background-color, width;
transition-duration: 2s, 10s;
transition-timing-function: ease-in-out;
}
div:hover{
background-color: red;
width: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Для использования кубической Безье в функцию cubic-bezier необходимо передать ряд значений:
transition-timing-function: cubic-bezier(.5, .6, .24, .18);
Свойство transition-delay позволяет определить задержку перед выполнением перехода:
transition-delay: 500ms;
Временной период также указывается в секундах (s) или миллисекундах (ms).
Свойство transition представляет сокращенную запись выше рассмотренных свойств. Например, следующее описание свойств:
transition-property: background-color; transition-duration: 3s; transition-timing-function: ease-in-out; transition-delay: 500ms;
Будет аналогично следующей записи:
transition: background-color 3s ease-in-out 500ms;