CSS :: Свойство transition
http://belarusweb.net
Основы создания сайтов

CSS :: Свойство transition

css-свойство transition (от англ. transitionпереход) позволяет задать сразу несколько параметров транзитного перехода, которые могут быть перечислены через пробел в следующей последовательности: transition-property || transition-duration || transition-timing-function || transition-delay.

Свойство transition позволяет применять один эффект перехода только к одному свойству. Указывать через запятую несколько имен свойств для перехода нельзя: необходимо указывать весь блок параметров для каждого отдельного свойства, перечисляя такие блоки через запятую (см. синтаксис).

Характеристики

  • Значение по умолчанию: all 0s ease 0s.
  • Применяется: ко всем элементам, а также к псевдоэлементам ::before и ::after.
  • Наследуется: нет.
  • Анимируется: нет.
  • JavaScript: object.style.transition="value".

Синтаксис

transition: none || [[transition-property || transition-duration || transition-timing-function || transition-delay], ...]

Значения

  • Перечисляемые через запятую блоки параметров перехода для каждого требуемого свойства, в которых значения свойств перечисляются через запятую в следующей последовательности: transition-property || transition-duration || transition-timing-function || transition-delay. Если значение какого-нибудь свойства не будет указано, браузер применит значение по умолчанию.
  • none – отмена эффекта перехода.

Ссылки

Примеры

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		/* Параметры блока */
		div{
		padding: 1em;
		width: 130px;
		height: 50px;
		border: solid 4px red;
		background-color: #00ff00;
		cursor: pointer;
		}

		/* Задаем по отдельности
		.transition_ex{
		transition-property: width, background-color;
		transition-duration: 1s;
		transition-timing-function: ease;
		transition-delay: 0.2s;
		} */
		
		/* Задаем в одном свойстве */
		.transition_ex{
		transition: width 1s ease 0.2s, background-color 1s ease 0.2s;
		}		
		
		div:hover{
		background-color: #0000ff;
		width: 450px;
		}
	</style>
	
</head>
<body>
	<div class="transition_ex">Наведите курсор!</div>
</body>
</html>

Пример №1