CSS3 переход
Переходы CSS3 - это эффекты, которые позволяют плавно изменять значения свойства от одного значения к другому в течение заданной продолжительности. Эти эффекты постепенно изменяют свойство элемента от одного стиля к другому, без использования Flash или JavaScript.
Для создания перехода необходимо указать две вещи:
- CSS свойство, к которому вы хотите добавить эффект.
- Продолжительность времени.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3D Transition </title>
<meta charset="UTF-8">
<style>
button {
color: #fff;
border: none;
padding: 10px 20px;
font: bold 18px sans-serif;
background: #da6e18bd;
-webkit-transition: background 2s; /* For Safari 3.0 to 6.0 */
transition: background 2s; /* For modern browsers */
}
button:hover {
background: seagreen;
}
</style>
</head>
<body>
<button type="button">Hover on me</button>
</body>
</html>
Выход
В приведенном ниже примере ширина элемента увеличивается при наведении курсора. Также указывается значение времени перехода, которое указывает время перехода, в течение которого он будет завершен. Если вы уберете курсор мыши с элемента, он медленно приобретет свой первоначальный стиль.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3D Transition </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background: #758bbd;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
Выход
Наведите указатель мыши на элемент div выше, чтобы увидеть эффект перехода.
Переход + Трансформация
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3D Transition + Transform </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background: #555d18de;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(180deg); /* Safari */
transform: rotate(180deg);
}
</style>
</head>
<body>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
Выход
Имущество | Описание |
---|---|
переход | Это сокращенное свойство, позволяющее установить все четыре отдельных свойства перехода ниже в одном объявлении. |
задержка перехода | Он определяет период времени, по истечении которого начнется переход. |
Продолжительность перехода | Он определяет период времени, в течение которого анимация перехода должна быть завершена. |
переходная собственность | В нем указывается имя свойства CSS, к которому следует применить эффект перехода. |
Поддержка браузера
|
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
Transition
|
|
|
|
|
|