Css3 transition: transition — CSS: Cascading Style Sheets — Вебджем.рф | Создание и продвижение сайтов

Содержание

transition | htmlbook.ru

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+

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

Значение по умолчанию	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: Отменяет эффект перехода.

Пример

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>
   <li>1</li><li>2</li>
   <li>3</li><li>4</li>
   <li>&darr;</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.

Анимация

CSS по теме

transition

Статьи по теме

Иконки из символов
Полоски при наведении

Рецепты CSS

Как плавно изменить цвет ссылки?

transition-delay | htmlbook.

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+

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

Значение по умолчанию	0s
Наследуется	Нет
Применяется	Ко всем элементам, к псевдоэлементам ::before и ::after
Процентная запись	Неприменима
Ссылка на спецификацию	http://dev.w3.org/csswg/css-transitions/#transition-delay

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

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

Синтаксис

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

Значения

См. время.

Пример

HTML5CSS3IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition-delay</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: .4s ease-out;
     -webkit-transition-delay: 0.
  5s;
     -o-transition: .4s ease-out;
     -o-transition-delay: 0.5s;
     -moz-transition: .4s ease-out;
     -moz-transition-delay: 0.5s;
     transition: .4s ease-out;
     transition-delay: 0.5s;
    }
   #bar:hover { top: 0; }
  </style>
 </head>
 <body>
  <ul>
   <li>1</li><li>2</li>
   <li>3</li><li>4</li>
   <li>&darr;</li>
  </ul>
 </body>
</html>

В данном примере при наведении курсора на стрелку, раскрывается блок с числами.

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

[window.]document.getElementById(«elementID»).style.transitionDelay

Браузеры

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

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

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

Анимация

CSS по теме

transition-delay

Статьи по теме

Рецепты CSS

переходов CSS

❮ Предыдущий Далее ❯

Переходы CSS

Переходы CSS позволяют плавно изменять значения свойств в течение заданного времени.

Наведите указатель мыши на элемент ниже, чтобы увидеть эффект перехода CSS:

В этой главе вы узнаете о следующих свойствах:

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

Поддержка переходов браузером

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

Собственность
переход	26,0	10,0	16,0	6.1	12,1
задержка перехода	26,0	10,0	16,0	6. 1	12,1
длительность перехода	26,0	10,0	16,0	6.1	12,1
свойство перехода	26,0	10,0	16,0	6.1	12.1
функция синхронизации	26,0	10,0	16,0	6.1	12,1

Как использовать переходы CSS?

Чтобы создать эффект перехода, вы должны указать две вещи:

свойство CSS, к которому вы хотите добавить эффект
длительность эффекта

Примечание: Если часть длительности не указана, переход не будет иметь никакого эффекта, поскольку значение по умолчанию равно 0,

В следующем примере показан красный элемент

размером 100 пикселей * 100 пикселей.

Элемент также задал эффект перехода для свойства ширины длительностью 2 секунды:

Пример

div {

ширина: 100 пикселей;
высота: 100 пикселей;
фон: красный;
переход: ширина 2 с;
}

Эффект перехода начнется, когда указанное свойство CSS (ширина) изменит значение.

Теперь давайте укажем новое значение свойства ширины, когда пользователь наводит указатель мыши на элемент

Пример

div:hover {
ширина: 300 пикселей;
}

Попробуйте сами »

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

Изменение нескольких значений свойств

В следующем примере добавляется эффект перехода для свойств ширины и высоты с длительностью 2 секунды для ширины и 4 секунды для высоты:

Пример

div {
переход: ширина 2 с, высота 4 с;
}

Попробуйте сами »

Задайте кривую скорости перехода

Свойство transition-timing-function задает кривую скорости эффекта перехода.

Свойство transition-timing-function может принимать следующие значения:

легкость — задает эффект перехода с медленным началом, затем быстрым и медленным завершением (значение по умолчанию)
linear — задает эффект перехода с одинаковой скоростью от начала до конца
easy-in — задает эффект перехода с медленным стартом
easy-out — определяет эффект перехода с медленным концом
easy-in-out — определяет эффект перехода с медленным началом и концом
cube-bezier(n,n,n,n) — позволяет определить собственные значения в функции кубического Безье

В следующем примере показаны некоторые из различных кривых скорости, которые можно использовать:

Пример

#div1 {функция времени перехода: линейная;}

#div2 {функция синхронизации перехода: легкость;}
#div3 {функция синхронизации перехода: переход;}
#div4 {функция синхронизации перехода: переход;}
#div5 {transition-timing-function: easy-in-out;}

Попробуйте сами »

Задержка эффекта перехода

Свойство transition-delay указывает задержку (в секундах) для эффекта перехода.

В следующем примере задержка перед запуском составляет 1 секунду:

Пример

раздел {
задержка перехода: 1 с;
}

Попробуйте сами »

Переход + преобразование

В следующем примере к преобразованию добавляется эффект перехода:

Пример

div {
переход: ширина 2 с, высота 2 с, преобразование 2 с;
}

Попробуйте сами »

Больше примеров перехода

Свойства перехода CSS можно указать одно за другим, например:

Пример

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

Попробуйте сами »

или с помощью сокращенного свойства transition :

Пример

div {
переход: ширина 2s линейная 1s;
}

Попробуйте сами »

Проверьте себя с помощью упражнений

Упражнение:

Добавьте 2-секундный эффект перехода для изменения ширины элемента

<стиль>
дел {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  фон: красный;
  : ;
}
раздел:наведите {
  ширина: 300 пикселей;
}

<тело>
   Это div

Начать упражнение

Свойства перехода CSS

В следующей таблице перечислены все свойства перехода CSS:

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

❮ Предыдущий Next ❯

transition — CSS: каскадные таблицы стилей -задержка

Переходы позволяют определить переход между двумя состояниями элемента. Различные состояния могут быть определены с использованием псевдоклассов, таких как :hover или :active или динамически устанавливается с помощью JavaScript.

Это свойство является сокращением для следующих свойств CSS:

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

 /* Применить к 1 свойству */
/* имя свойства | продолжительность */
переход: край-справа 4s;
/* имя свойства | продолжительность | задерживать */
переход: край-справа 4с 1с;
/* имя свойства | продолжительность | функция ослабления */
переход: поле-вправо 4s облегчение входа-выхода;
/* имя свойства | продолжительность | функция смягчения | задерживать */
переход: поле-вправо 4 с, облегчение входа-выхода 1 с;
/* Применить к 2 свойствам */
переход: поле-справа 4s, цвет 1s;
/* Применить ко всем измененным свойствам */
переход: все 0,5 сек.  
/* Глобальные значения */
переход: наследовать;
переход: начальный;
переход: возврат;
переход: обратный слой;
переход: не установлен;

Свойство перехода указывается как один или несколько переходов с одним свойством, разделенных запятыми.

Каждый переход одного свойства описывает переход, который должен быть применен к одному свойству (или специальные значения все и нет ). Он включает:

ноль или одно значение, представляющее свойство, к которому должен применяться переход. Это может быть любой из:
- ключевое слово нет
- ключевое слово все
- a имя свойства CSS.
ноль или один значение, представляющее функцию плавности для использования
ноль, один или два <время> значений. Первое значение, которое может быть проанализировано как время, назначается transition-duration , а второе значение, которое может анализироваться как время, назначается transition-delay .

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

Начальное значение	Как каждый из свойств сокращенного. `transition-timing-function` : `ease`
Applies to	all elements, `::before` and `::after` pseudo-elements
Inherited	no
Вычисленное значение	как каждое из свойств сокращенной записи: `transition-delay` : как указано `transition-duration` : как указано `Переход-пропертиза` : как указано `Переход-ТИМ-функция` : как указано
Тип анимации

292929145. > Дискрет

4929.> Discrete

29.> Discrete

492914>>145.>. single-transition> =
[ нет | ] ||
||

«> =
all |

«> =
linear |
<линейная-функция-замедления> |
<кубическая-безье-функция смягчения> |
<ступенчатая-функция-замедления>

«><линейная-функция-замедления> =
linear(<линейный-стоп-список>)

«><кубическая-функция-замедления-Безье> =
легкость |
облегчение |
облегчение |
легкость входа-выхода |
cube-bezier( <число [0,1]> , <число> , <число [0,1]> , <число> )

«><шаг-функция смягчения> =
шаг-начало |
шаг -end |
шагов( [ ]? )

«> =
[ ]#

«> =
<число> &&
?

«> =
{1,2}

Простой пример

В этом примере выполняется четырехсекундный переход размера шрифта с задержкой в одну секунду, когда пользователь наводит курсор на элемент

HTML

 Наведите курсор на меня

Css3 transition: transition — CSS: Cascading Style Sheets

transition | htmlbook.ru

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

Версии CSS

Описание

Синтаксис

Значения

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

Браузеры

CSS по теме

Статьи по теме

Рецепты CSS

transition-delay | htmlbook.

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

Версии CSS

Описание

Синтаксис

Значения

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

Браузеры

CSS по теме

Статьи по теме

Рецепты CSS

переходов CSS

Переходы CSS

Поддержка переходов браузером

Как использовать переходы CSS?

Пример

Пример

Изменение нескольких значений свойств

Пример

Задайте кривую скорости перехода

Пример

Задержка эффекта перехода

Пример

Переход + преобразование

Пример

Больше примеров перехода

Пример

Пример

Проверьте себя с помощью упражнений

Упражнение:

Свойства перехода CSS

transition — CSS: каскадные таблицы стилей -задержка

Простой пример

HTML

CSS

Добавить комментарий Отменить ответ

Рубрики