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>

Выход

CSS 3D Transition

В приведенном ниже примере ширина элемента увеличивается при наведении курсора. Также указывается значение времени перехода, которое указывает время перехода, в течение которого он будет завершен. Если вы уберете курсор мыши с элемента, он медленно приобретет свой первоначальный стиль.

Пример

<!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>

Выход

CSS 3D Transition

Наведите указатель мыши на элемент 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 3D Transition + Transform

Имущество	Описание
переход	Это сокращенное свойство, позволяющее установить все четыре отдельных свойства перехода ниже в одном объявлении.
задержка перехода	Он определяет период времени, по истечении которого начнется переход.
Продолжительность перехода	Он определяет период времени, в течение которого анимация перехода должна быть завершена.
переходная собственность	В нем указывается имя свойства CSS, к которому следует применить эффект перехода.

Поддержка браузера

Имущество	Край	Хром	Fire Fox	Опера	Сафари
`Transition`	да	да	да	да	да

CSS

CSS3 переход

Выход

Выход

Переход + Трансформация

Выход

Поддержка браузера

Подпишитесь на нашу email рассылку 👇