какие значения для свойства transition являются обязательными

2.20. CSS3-переходы

CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный перечень вы найдёте на этой странице.

Создание плавных изменений свойств элементов

Поддержка браузерами

1. Название свойства transition-property

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

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

2. Продолжительность перехода transition-duration

Задаёт промежуток времени, в течение которого должен осуществляться переход. Если разные свойства имеют разные значения для перехода, они указываются через запятую. Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет. Свойство не наследуется.

3. Функция перехода transition-timing-function

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

Для создания более реалистичных анимаций используйте функцию cubic Bézier:

4. Задержка перехода transition-delay

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

5. Краткая запись перехода

Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition
transition: transition-property transition-duration transition-timing-function transition-delay;

Если воспользоваться значениями по умолчанию, то запись

6. Плавный переход нескольких свойств

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

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

Наведите курсором мыши на блоки, чтобы увидеть свойства в действии.

Источник

CSS-анимации

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/css-animations.

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.

Однако, как мы увидим далее, для более тонкого контроля анимации JavaScript вовсе не будет лишним.

CSS transitions

Идея проста. Мы указываем, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию.

Теперь любое изменение фонового цвета будет анимироваться в течение 3х секунд.

При клике на эту кнопку происходит анимация её фона:

Есть всего 5 свойств, задающих анимацию:

Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:

Далее мы рассмотрим свойства анимации по отдельности.

transition-property

Анимировать можно не все свойства, но многие. Значение all означает «анимировать все свойства».

transition-duration

transition-delay

Возможны отрицательные значения, при этом анимация начнётся с середины.

Например, вот анимация цифр от 0 до 9 :

Она осуществляется сменой margin-left у элемента с цифрами, примерно так:

В примере выше JavaScript просто добавляет элементу класс – и анимация стартует:

В примере ниже при клике на цифру она начнёт двигаться с текущей секунды:

В JavaScript это делается дополнительной строкой:

transition-timing-function

Временнáя функция, которая задаёт, как процесс анимации будет распределён во времени, например начнётся ли анимация медленно, чтобы потом ускориться или наоборот.

Самое сложное, но при небольшом изучении – вполне очевидное свойство.

У него есть два основных вида значения: кривая Безье и по шагам. Начнём с первого.

Кривая Безье

В качестве временной функции можно выбрать любую кривую Безье с 4 опорными точками, удовлетворяющую условиям:

Она указывает, как быстро развивается процесс анимации во времени.

График этой «кривой» таков:

Поезд в примере ниже с постоянной скоростью «едет» слева направо, используя такую временную функцию:

Источник

Использование CSS переходов

Experimental: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS transitions предоставляют способ контролировать скорость анимации, при изменении CSS-свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, изменения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.

Анимации, составляющие переход между двумя состояниями, часто называют неявными переходами, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.

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

Какие CSS-свойства анимируются?

Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень доступных для анимирования свойств ограничен определённым набором.

Пример анимирования нескольких свойств

CSS-свойства, определяющие переходы

Можно контролировать определённые параметры перехода следующими подсвойствами:

transition-property (en-US) Указывает имя или имена свойств, чьи переходы должны анимироваться. Только свойства, указанные здесь, анимируются в переходах; изменение других свойств будет происходить обычным образом. transition-duration Определяет время происхождения перехода. Можно указать время анимирования всех свойств перехода сразу или для каждого свойства в отдельности.

Источник

Переходы в CSS

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

Вы можете определить:

Имейте в виду, что переход представляет собой специфический вид анимации, где есть только начальное и конечное состояние.

Быстрый пример

Вместо мгновенного применения правил CSS при наведении, фон и цвет текста меняются медленно.

transition-duration

transition-duration является единственным стилевым свойством, необходимым для создания перехода. Оно может быть установлено либо в секундах (2s), либо в миллисекундах (100ms).

Если вы хотите, чтобы ваш переход длился полсекунды, то можете написать 0.5s или 500ms. В зависимости от того, насколько быстро вы хотите, чтобы длился переход, может быть проще и/или быстрее писать одну единицу.

transition-property

Только треть свойств CSS может быть анимирована. На сайте Mozilla есть полный список свойств.

Вы можете разрешить анимацию только одного или нескольких свойств.

Свойство border полностью анимируется и позволяет легко наблюдать медленный переход (2 секунды).

transition-timing-function

Функция времени определяет, как вычисляется значение каждого свойства во время перехода.

По умолчанию переход равен ease : он ускоряется в начале и замедляется в конце.

Вы можете решить, что переход будет происходить с постоянной скоростью. Функция времени может ускорить или замедлить переход.

Имейте в виду, что все переходы занимают одинаковое время (1 секунда).

Если вы хотите получить представление, как работают другие функции времени, посмотрите эту шпаргалку.

cubic-bezier

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

Сайт cubic-bezier.com — это простой инструмент для визуального написания своих собственных кривых.

transition-delay

transition-delay определяет задержку, т. е. как долго переход должен ждать, прежде чем начнётся на самом деле.

Как и с transition-duration вы можете использовать секунды (s) или миллисекунды (ms).

Источник

Руководство по свойству transition в CSS3

Обычно, когда значение свойства CSS изменяется, результат рендеринга мгновенно обновляется. Типичным примером является изменение цвета фона кнопки при наведении курсора мыши. В обычном сценарии цвет фона кнопки сразу меняется со старого значения свойства на новое при наведении курсора на кнопку.

В CSS3 появилась новая функция перехода, которая позволяет плавно анимировать свойство из старого значения в новое. В следующем примере показано, как анимировать цвет фона background-color HTML-кнопки при наведении курсора мыши.

Вы должны указать как минимум имя CSS-свойства, к которому вы хотите применить эффект перехода, используя CSS-свойство transition-property и продолжительность эффекта transition-duration (больше 0 ), чтобы осуществить переход. Все остальные свойства transition являются необязательными, так как их значения по умолчанию не предотвращают переход.

Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, принимающее значения в виде чисел, длин, процентов или цветов, является анимируемым.

Список всех анимируемых свойств есть в Руководство по анимациям в CSS3.

Выполнение нескольких transition

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

В примере ниже, свойства background и border будут анимироваться с разной скоростью.

Сокращенное свойство transition

Есть много свойств, которые следует учитывать при применении переходов. Однако также возможно указать все свойства перехода в одном отдельном свойстве, чтобы сократить код.

При использовании этого свойства важно придерживаться этого порядка для значений.

Свойства transition

В следующей таблице приведен краткий обзор всех свойств transition :

Похожие посты

Руководство по свойству opacity в CSS

Руководство по таблицам в CSS

Руководство по свойству margin в CSS

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

Источник