Свойство CSS Transition нужен для установки анимационного перехода из одного состояния в другое. Анимация работает с помощью псевдоэлементов :hover и :active, т.е. при переходе объекта из одного состояния в другое.
Синтаксис CSS transition
transition: [ none | <transition-property> ] || <transition-duration> || <transition-timing-function> || <transition-delay>;
Синтаксис выглядит довольно устрошающе, но по факту все просто. Давайте разберем на простых примерах как это работает. После двух примеров будут разобраны все возможные значения каждого из элемента синтаксиса:
<transition-property>
<transition-duration>
<transition-timing-function>
<transition-delay>
Пример 1 жми
[html]
<html>
<head>
<style>
.primer1{
width:100px;
height:100px;
background:#444;
margin:30px;
transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
}
.primer1:hover{
width:120px;
height:120px;
background:#AAA;
margin:30px;
transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
}
</style>
</head>
<body>
<div class="primer1"></div>
</body>
</html>
[/html]
Код
<html>
<head>
<style>
.primer1{
width:100px;
height:100px;
background:#444;
margin:30px;
transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
}
.primer1:hover{
width:120px;
height:120px;
background:#AAA;
margin:30px;
transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
}
</style>
</head>
<body>
<div class="primer1"></div>
</body>
</html>
Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:
Код transition: all 1s linear означает следующее:
all - плавное действие применяется ко всем свойствам, это касается цвета (color), фона (background). Вместо all можно было написать color, тогда плавный переход распространился бы только на цвет
1s - время в течении которого осуществляется переход (можно задавать в формате милисекунд: 1000ms);
linear - объект изменяется с постоянной скоростью (линейно). Есть и другие варианты эффектов (о них будет рассказано чуть ниже)
