Transition свойство css: Использование CSS переходов — CSS

transition-delay | WebReference

Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.

Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property.

Краткая информация

Синтаксис

transition-delay: <время> [,<время>]*

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

См. время.

Пример

Объектная модель

Объект.style.transitionDelay

Примечание

Chrome до версии 26.0, Safari до версии 6.1 и Android до версии 4.4 поддерживают свойство -webkit-transition-delay.

Opera до версии 12.10 поддерживает свойство -o-transition-delay.

Firefox до версии 16 поддерживает свойство -moz-transition-delay.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Анимация

См. также

• transition
• transition-duration
• transition-property
• transition-timing-function
• Переходы
• Переходы и анимация

Курс CSS.

Курс CSS. Урок 51. CSS3. Преобразования. Transitions.

Он иногда читает Оле
Нравоучительный роман,
В котором автор знает боле
Природу, чем Шатобриан,
А между тем две, три страницы
(Пустые бредни, небылицы,
Опасные для сердца дев)
Он пропускает, покраснев.
Уединясь от всех далеко,
Они над шахматной доской,
На стол облокотясь, порой
Сидят, задумавшись глубоко,
И Ленской пешкою ладью
Берет в рассеяньи свою.

Поиграйтесь с блоком выше, нажимая кнопки «Анимировать» и «Восстановить».

Теперь затронем теорию вопроса.

Таблица свойств CSS 3. Cвойство transitions (преобразования).

NN	Свойство	Гугль Хром	FireFox	IE	Safari	Opera
137	transition	26	16	10	-webkit-	12. 1
138	transition-property	26	16	10	-webkit-	12.1
139	transition-duration	26	16	10	-webkit-	12.1
140	transition-timing-function	26	16	10	-webkit-	12.1
141	transition-delay	26	16	10	-webkit-	12. 1

Технология свойства transition (преобразование).

Преобразование CSS3 это эффекты, которые позволяют элементу переходить от одного стиля к другому.

• Определить свойство CSS к которому мы желаем добавить эффект.
• Определить продолжительность эффекта в секундах.

Эффект начнет действовать, когда требуемое свойство CSS меняет свою значение.

В данном примере это происходит при наведении курсора на объект и при клике по объекту (не отпуская левую кнопку мыши).

Обратите внимание, что при этом высота объекта меняется быстро, а ширина постепенно, в течение 1 секунды.

Рассмотрим классы объекта, чтобы совсем все стало понятно.

.pics_051 {
	width:50px;
	height:50px;
	transition: width 1s;
	-webkit-transition: width 1s; /* Safari */
}

Изображению заданы свойства ширины и высоты, и продолжительность эффекта в 1 секунду, ЕСЛИ будет изменяться ширина.

.pics_051:hover {
	width:100px;
	height:100px;
	cursor:pointer;	
}

При наведении мыши высота объекта меняется быстро, а ширина постепенно, в течение 1 секунды.

Это благодаря тому, что ранее мы задали:
transition: width 1s;
А насчет height (высота) такого условия не было, потому она меняется быстро, без эффекта.

И еще имеется класс при клике мышкой (следует кликнуть и не отпускать кнопку мыши).

.pics_051:active  {
	width:300px;
	height:300px;
}

И опять же, как и при наведении мыши — при клике (не отпуская кнопку мыши) высота объекта меняется быстро, а ширина постепенно, в течение 1 секунды.

А вот если необходимо, чтобы эффекты действовали на несколько стилей, можно задавать эффекты для нескольких свойств, разделяя запятыми, например:
transition: width 1s, height 1s;

Выше мы рассматривали возможности короткой записи свойства transition (преобразование).

В таблице ниже представлены описания всех свойств, относящихся к transition (преобразование).

Свойства, относящиеся к transition (преобразование).

NN	Свойство	Описание
1	transition	Сокращенная запись, которая позволяет установить до 4 свойств относящихся к преобразованию в одно простое свойство.
2	transition-property	Определяет свойство CSS, к которому относится преобразование.
3	transition-duration	Определяет продолжительность процесса преобразования в секундах. По умолчанию 0.
4	transition-timing-function	Определяет каким способом будет проведен расчет продолжительности процесса преобразования. По умолчанию «ease».
5	transition-delay	Определяет задержку перед стартом преобразования в секундах. По умолчанию 0.

Пример использование всех свойств относящихся к transition (преобразованию).

#sample_51_1 {
	width:100px;
	height:100px;
	background:#D7FFEA;
	margin:0px auto 0px auto;
	text-align:center;
	border:3px solid #B7F777; 
	border-radius:10px;
	box-shadow: 6px 7px 5px #979797;
	transition-property: width;
	transition-duration: 2s;
	transition-timing-function: linear;
	transition-delay: 1s;
	/* Safari */
	-webkit-transition-property:width;
	-webkit-transition-duration:2s;
	-webkit-transition-timing-function:linear;
	-webkit-transition-delay:1s;
} 
#sample_51_1:hover {
	width:100%;
}

Наведите на меня мышь и ждите…

Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
css_051_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте…
css_051_001.zip ← скачайте пример, чтобы установить на свой сайт…

• ← назад…
• Главная
• … вперед →

***** Машина-Функционал для передвижения по страничкам курса CSS *****

Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.

Если вы планируете вернуться сюда позднее…
Пожалуйста, запомните эту страничку —
URL: http://kocby.ru/css/p051.html

Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!

CSS | свойство перехода — GeeksforGeeks

Улучшить статью

Сохранить статью

• Последнее обновление: 01 Авг, 2022

Улучшить статью

Сохранить статью

Свойство перехода в CSS используется для создания эффекта перехода. Переход представляет собой комбинацию четырех свойств, перечисленных ниже: 

• свойство перехода
• длительность перехода
• функция времени перехода
• задержка перехода

Примечание: Эффект перехода может быть определен в двух состояниях (наведение и активный) с использованием псевдоклассов, таких как: наведение или: активный или классы, динамически устанавливаемые с помощью JavaScript .

Синтаксис:  

 переход: свойство перехода длительность перехода
переход-времени-функция переход-задержка; 

Примечание: Если какие-либо значения не определены, браузер принимает значения по умолчанию.

Значения свойств:  

• свойство перехода: Указывает свойства CSS, к которым должен применяться эффект перехода.
• transition-duration: Определяет продолжительность времени, которое требуется для завершения анимации перехода.
• функция времени перехода: Определяет скорость перехода.
• transition-delay: Указывает задержку перехода или время начала перехода.

Example:  

HTML

Вывод:  

• Эффект до перехода: 

• Эффект после перехода: 

Поддерживаемые браузеры0034 Браузеры, поддерживаемые свойством перехода , перечислены ниже: 

• Google Chrome 26 и выше
• Edge 12 и выше
• Internet Explorer 10 и выше
• Firefox 16 и выше
• Opera
и Safari 12. 10 и выше и выше

 переход: свойство перехода | продолжительность перехода | временная функция перехода | задержка перехода | начальная | наследовать; 

 

  <голова>
    
    <стиль>
      дел {
        ширина: 150 пикселей;
        высота: 100 пикселей;
        фон: #8ebf42;
        -webkit-transition: ширина 2s;
        -moz-переход: ширина 2с;
        -o-переход: ширина 2s;
        переход: ширина 2s;
      }
      раздел: активный {
        ширина: 600 пикселей;
      }
    
  
  <тело>
     
Пример свойства перехода
 
    
Нажмите и удерживайте, чтобы увидеть эффект перехода. 
    <дел>
  
 

  <голова> <стиль> тело {
 цвет фона: #fff;
 цвет: #000;
 размер шрифта: 1em;
 семейство шрифтов: «Roboto», Helvetica, без засечек;
 }
 .элемент {
 отступ: 20 пикселей;
 ширина: 50 пикселей;
 высота: 50 пикселей;
 слева: 0;
 цвет фона: #8ebf42;
 положение: родственник;
 -webkit-transition: левый 1 с облегчением входа-выхода, фоновый цвет 1 с уменьшением 1 с;
 -moz-transition: левый 1 с плавный вход-выход, фоновый цвет 1 с плавный выход 1 с;
 -o-переход: левый 1 с плавный вход-выход, фоновый цвет 1 с плавный выход 1 с;
 переход: левый 1s easy-in-out, background-color 1s easy-out 1s;
 }
 .пример: наведение .элемент {
 слева: 400 пикселей;
 цвет фона: #1c87c9;
 }
 .