Здравствуйте! От трансформаций в CSS перейдем к переходам да простят меня за тавтологию. Переход (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 Читать далее
Это интересно
+1
|
|||
Последние откомментированные темы:
-
Лучший чат-бот с искусственным интеллектом - какой из них вам подходит?
(1)
boris 1
,
13.01.2022
-
Новогоднее украшение рабочего стола ПК
(1)
Елена2022
,
21.12.2021
-
Как JPG преобразовать в Word с распознаванием текста
(1)
Olejaweb
,
13.11.2021
-
Как вернуть классическое ленточное меню в проводник Windows 11
(1)
Сергей Михайлов сын
,
26.10.2021
20251119143518