Тег transition у CSS: опис, синтаксис та значення
Transition - універсальне властивість CSS, що дозволяє одночасно задати значення transition-property, transition-duration, transition-timing-function і transition-delay. Встановлює ефект переходу між двома станами елемента, які можуть бути визначені за допомогою псевдоелемента :hover або :active, а також динамічно через JavaScript.
Синтаксис
transition: <перехід> [, <перехід>]*
Тут:
<перехід> = [ none | <transition-property> ] || <transition-duration> || <transition-timing-function> || <transition-delay>
Значення
- none
- Скасовує ефект переходу.
Приклад
HTML5CSS3IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition</title>
<style>
#bar {
top:-5.5em; right:5em;
padding: .5em;
margin: 0;
position: absolute;
width: 2em;
background: #333;
color: #fff;
text-align: center;
-webkit-transition: top 1s ease-out 0.5s;
-moz-transition: top 1s ease-out 0.5s;
-o-transition: top 1s ease-out 0.5s;
transition: top 1s ease-out 0.5s;
}
#bar:hover { top: 0; }
</style>
</head>
<body>
<ul id="bar">
<li>1</li><li>2</li>
<li>3</li><li>4</li>
<li>↓</li>
</ul>
</body>
</html>У даному прикладі при наведенні курсора на стрілку, розкривається блок з числами.
Браузери
Chrome до версії 26.0, Safari, Android та iOS підтримують нестандартну властивість -webkit-transition.
Opera до версії 12.10 підтримує нестандартну властивість -o-transition.
Firefox до версії 16.0 підтримує нестандартну властивість -moz-transition.