Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |||
10.0 + | 1.0 + | 26.0 + | 11.6 + | 12.10 + | 3.0 + | 4.0 + | 16.0 + | 2.1 | 2.0 + |
Коротка інформація
Значення за умовчанням th> | all 0s ease 0s |
---|---|
Успадковується | Ні |
Застосовується | до всіх елементів, до псевдоелементи :: before і :: after |
Відсотковий запис | незастосовні |
Посилання на специфікацію | http://dev.w3.org/csswg/css3-transitions/#transition |
Версії CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Опис
Універсальний атрибут, котор е дозволяє одночасно задати значення transition-property, transition-duration, transition-timing-function і transition-delay . Встановлює ефект переходу між двома станами елемента, вони можуть бути визначені за допомогою псевдоелемента : hover або : active, а також динамічно через JavaScript.
Синтаксис
transition: <перехід> [, <перехід> ] *
Тут:
<перехід> =[None | < transition-property > ] || < transition-duration > || < transition-timing-function > || < transition-delay >
Значення
- none
- Скасовує ефект переходу.
Приклад
HTML5 CSS3 IE 10 + Cr Op Sa Fx
<!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>
В даному прикладі при наведенні курсору на стрілку, розкривається блок з числами.
Об'єктна модель
[window.] document.getElementById (" elementID "). style.transition
Браузери
Chrome до версії 26.0, Safari, Android і iOS підтримують нестандартне властивість - webkit-transition .
Opera до версії 12.10 підтримує нестандартне властивість - o -transition .
Firefox до версії 16.0 підтримує нестандартне властивість - moz-transition .