Переходы в CSS

CSS-переходы

С помощью CSS-переходов значения свойства плавно переходят в новое состояние за заданный промежуток времени.

Свойство CSS transition

Для эффекта перехода нужны всего две вещи: какое CSS-свойство анимировать и сколько должно длиться изменение.

И то и другое можно задать с помощью transition — сокращения для четырёх свойств:

transition-property
transition-duration
transition-timing-function
transition-delay

В примере ниже у элемента <div> размером 100px на 100px есть эффект перехода длительностью 2 секунды для свойства width.

Переход запускается при изменении свойств элемента, а это изменение часто вызывают псевдоклассы, такие как :hover, :active, :focus или :checked.

Когда курсор покидает элемент, исходный стиль постепенно возвращается.

Пример

При наведении курсора на <div> он расширяется до 300px, и это изменение происходит плавно.

Создайте страницу с красным div размером 100x100px, использующим CSS-переход для свойства width длительностью 2 секунды. Когда пользователь наводит курсор на div, ширина изменяется до 300px.

> Output: complete HTML page

Prompt

Создайте страницу с красным div размером 100x100px, использующим CSS-переход для свойства width длительностью 2 секунды. Когда пользователь наводит курсор на div, ширина изменяется до 300px.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transition on Hover</title>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>CSS Transition on Hover</h1>

<p>Mouse over the div element below, to see the transition effect:</p>

<div></div>

</body>
</html>

Настройка свойства transition

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s;
}

Изменение нескольких значений свойств

Когда переход выполняется сразу для нескольких свойств, они разделяются запятыми.

В примере ниже width, height и background-color получают переход с собственной длительностью.

Пример

Здесь изменение ширины занимает 2 секунды, высоты — 4 секунды, а цвета фона — 3 секунды.

Создайте страницу с красным div размером 100x100px, у которого при наведении курсора переходят несколько свойств: width до 300px за 2 секунды, height до 300px за 4 секунды и background-color до синего за 3 секунды.

> Output: complete HTML page

Prompt

Создайте страницу с красным div размером 100x100px, у которого при наведении курсора переходят несколько свойств: width до 300px за 2 секунды, height до 300px за 4 секунды и background-color до синего за 3 секунды.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transition Multiple Properties</title>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, height 4s, background-color 3s;
}

div:hover {
  width: 300px;
  height: 300px;
  background-color: blue;
}
</style>
</head>
<body>

<h1>CSS Transition - Multiple Properties</h1>

<p>Mouse over the div element below, to see the transition effect for multiple properties:</p>

<div></div>

</body>
</html>

Свойства CSS-перехода

Ниже перечислены все свойства CSS-перехода:

transition — сокращение, объединяющее четыре свойства перехода в одном свойстве
transition-delay — сколько времени (в секундах) эффект перехода ждёт перед запуском
transition-duration — сколько секунд или миллисекунд длится эффект перехода
transition-property — CSS-свойство, к которому применяется эффект перехода
transition-timing-function — кривая скорости, по которой идёт эффект перехода