Кривая скорости CSS-перехода
Свойство transition-timing-function задаёт кривую скорости эффекта перехода.
Оно может принимать одно из следующих значений:
ease- начинается медленно, ускоряется, затем замедляется в конце (значение по умолчанию)linear- сохраняет одинаковую скорость от начала до концаease-in- начинается медленноease-out- заканчивается медленноease-in-out- имеет медленное начало и медленное окончаниеcubic-bezier(n,n,n,n)- позволяет задать собственные значения в функции cubic-bezier
Пример
Разные кривые скорости для перехода:
Prompt
Создайте страницу с пятью элементами div, которые расширяются при наведении курсора, каждый с разным значением transition-timing-function: linear, ease, ease-in, ease-out и ease-in-out. Подпишите каждый div названием его функции тайминга.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Speed Curves</title>
<style>
div.box {
width: 100px;
height: 100px;
background-color: red;
color: white;
font-weight: bold;
line-height: 100px;
text-align: center;
margin-bottom: 10px;
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
div.box {
transition: width 2s;
}
div.box:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Transition Speed Curves</h1>
<p>Hover over the div elements below to see the different speed curves:</p>
<div id="div1" class="box">linear</div>
<div id="div2" class="box">ease</div>
<div id="div3" class="box">ease-in</div>
<div id="div4" class="box">ease-out</div>
<div id="div5" class="box">ease-in-out</div>
</body>
</html>
Задержка CSS-перехода
Свойство transition-delay задаёт задержку перед началом перехода.
Значение задаётся в секундах (s) или миллисекундах (ms).
Пример
Добавьте задержку в 1 секунду перед началом перехода:
Prompt
Создайте страницу с div, у которого меняется ширина при наведении курсора, используя CSS-переход с задержкой начала в 1 секунду.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Delay</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Transition Delay</h1>
<p>Hover over the div element below. The transition will start after a 1 second delay:</p>
<div></div>
</body>
</html>
Переход + Трансформация
Переход div с трансформацией
Этот пример сочетает переход и трансформацию на элементе <div>:
Prompt
Создайте страницу с div, у которого при наведении курсора переходят ширина, высота, цвет фона и трансформация (поворот), используя длительность 2 секунды для каждого свойства.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition + Transform (Div)</title>
<style>
div.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
div.box:hover {
width: 200px;
height: 200px;
background-color: blue;
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>Transition + Transform</h1>
<p>Hover over the div element to see a transition combined with a transform:</p>
<div class="box"></div>
</body>
</html>
Переход кнопки с трансформацией
Этот пример сочетает переход и трансформацию на кнопке:
Prompt
Создайте страницу с кнопкой, у которой при наведении курсора переходят цвет фона и трансформация (масштаб), используя тайминг ease-out в течение 1 секунды.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Transition + Transform</title>
<style>
button {
padding: 15px 30px;
font-size: 18px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
transition: background-color 1s ease-out, transform 1s ease-out;
}
button:hover {
background-color: #45a049;
transform: scale(1.2);
}
</style>
</head>
<body>
<h1>Button Transition + Transform</h1>
<p>Hover over the button to see a transition combined with a transform:</p>
<button>Hover Me</button>
</body>
</html>
Больше примеров перехода
Свойства CSS-перехода можно записывать по отдельности или использовать сокращённое свойство transition.
Отдельные свойства
Установка каждого свойства перехода отдельно:
Prompt
Создайте страницу с div, который расширяется при наведении курсора, используя отдельные свойства перехода: transition-property установлено в width, transition-duration установлено в 2s, transition-timing-function установлено в linear и transition-delay установлено в 1s.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Individual Transition Properties</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Individual Transition Properties</h1>
<p>Hover over the div element below (there is a 1 second delay before the transition starts):</p>
<div></div>
</body>
</html>
Сокращённое свойство
Использование сокращённого свойства transition:
Prompt
Создайте страницу с div, который расширяется при наведении курсора, используя сокращённое свойство перехода: width 2s linear 1s.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shorthand Transition</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s linear 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Shorthand Transition</h1>
<p>Hover over the div element below (there is a 1 second delay before the transition starts):</p>
<div></div>
</body>
</html>