Неверно что для такого свойства css как transition
I couldn’t get transitions to work on this page, anybody has any idea why?
6 Answers 6
A general answer for a general question. Transitions can’t animate properties that are auto. If you have a transition not working, check that the starting value of the property is explicitly set.
Sometimes, you’ll want to animate height and width when the starting or finishing value is auto . (For example, to make a div collapse, when its height is auto and must stay that way.) In this case, put the transition on max-height instead. Give max-height a sensible initial value (bigger than its actual height), then transition it to 0.
Использование CSS переходов
Experimental: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
CSS transitions предоставляют способ контролировать скорость анимации, при изменении CSS-свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, изменения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.
Анимации, составляющие переход между двумя состояниями, часто называют неявными переходами, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.
CSS переходы позволяют вам решить какие свойства нужно анимировать (перечислением их явно), когда анимация начнётся (установкой задержки), как долго переход будет выполняться (установкой продолжительности), а также как она будет запущена (определением функции по времени, например линейно или быстро в начале, медленно в конце).
Примечание: CSS переходы могут использоваться без префиксов, однако спецификация только недавно достигла стабильности, префиксы по-прежнему необходимы для браузеров на WebKit. Они также необходимы для поддержки старых версий браузеров (таких как: Firefox 15, Opera 12 и более ранних). Таблица совместимости приведена внизу страницы с ещё большим количеством информации.
Какие CSS-свойства анимируются?
Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень доступных для анимирования свойств (en-US) ограничен определённым набором.
Примечание: Замечание: Перечень анимируемых свойств может меняться по мере изменения спецификации.
Примечание: Значение свойства auto является сложным случаем. Спецификация не рекомендует анимировать в значение auto и из значения auto . Браузеры, основанные на Gecko, исполняют это требование в точности, а основанные на WebKit не так строго. Использование переходов с auto следует избегать, так как это может привести к непредсказуемым результатам, в зависимости от браузера и его версии.
Примечание: Необходимо также соблюдать осторожность при использовании переходов сразу после добавления элемента в DOM с помощью .appendChild() или удаления его display: none; свойства . Это выглядит, как будто никогда не происходило начальное состояние, а элемент всегда был в конечном состоянии. Самый простой способ преодолеть это ограничение — применить window.setTimeout() c некоторым количеством миллисекунд до изменения CSS-свойства, которое вы собираетесь анимировать.
Пример анимирования нескольких свойств
CSS-свойства, определяющие переходы
CSS переходы контролируются свойством transition . Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.
Можно контролировать определённые параметры перехода следующими подсвойствами:
(Заметьте, что циклы переходов бесконечны только для наших примеров; CSS transition s только анимируют смену свойства. Если вам нужно визуализировать этот цикл, обратите внимание на свойство animation (en-US) .)
Использование CSS-переходов
CSS-переходы позволяют контролировать скорость анимации при изменении свойств CSS. Вместо того, чтобы изменения свойств вступали в силу немедленно, вы можете заставить изменения свойства происходить в течение определенного периода времени. Например, если вы измените цвет элемента с белого на черный, обычно это происходит мгновенно. При включенных переходах CSS изменения происходят через промежутки времени, которые следуют кривой ускорения, и все они могут быть настроены.
Анимации, которые включают переходы между двумя состояниями, часто называют неявными переходами, поскольку состояния между начальным и конечным состояниями неявно определяются браузером.
Переходы CSS позволяют вам решить, какие свойства анимировать (путем явного перечисления их ), когда анимация запустится (установив задержку) , как долго продлится переход (установив длительность ) и как будет выполняться переход (определив функция времени , например , линейно или быстро в начале, медленно в конце).
Какие свойства CSS можно перенести?
Автор веб-сайта может определить, какое свойство должно быть анимировано и каким образом. Это позволяет создавать сложные переходы. Поскольку анимировать некоторые свойства не имеет смысла, список анимируемых свойств ограничен конечным набором.
Примечание . Набор свойств, которые можно анимировать, меняется по мере развития спецификации.
Примечание. Значение auto часто бывает очень сложным. Спецификация рекомендует не анимировать из и в auto . Некоторые пользовательские агенты, например, на основе Gecko, реализуют это требование, а другие, например, на основе WebKit, менее строги. Использование анимации с auto может привести к непредсказуемым результатам, в зависимости от браузера и его версии, и этого следует избегать.
Defining transitions
CSS-переходы контролируются с помощью свойства стенографического transition . Это лучший способ настройки переходов, поскольку он позволяет избежать несинхронизированных параметров, что может быть очень неприятно, поскольку приходится тратить много времени на отладку в CSS.
Управление отдельными компонентами перехода осуществляется с помощью следующих подкомпонентов:
Указывает имя или имена свойств CSS,к которым должны применяться переходы.Во время переходов анимируются только перечисленные здесь свойства;изменения всех остальных свойств происходят мгновенно,как обычно.
Определяет продолжительность,в течение которой должны происходить переходы.Вы можете указать единую продолжительность,которая применяется ко всем свойствам во время перехода,или несколько значений,чтобы позволить каждому свойству перейти за разный период времени.
Задает функцию, определяющую, как вычисляются промежуточные значения для свойств. Функции времени определяют, как рассчитываются промежуточные значения перехода. Большинство функций синхронизации можно указать, предоставив график соответствующей функции, определяемый четырьмя точками, определяющими кубическую кривую Безье. Вы также можете выбрать замедление из шпаргалки по функциям замедления .
Определяет,как долго ждать между изменением свойства и началом перехода.
Сокращенный синтаксис CSS transition записывается следующим образом:
Examples
Simple example
В этом примере выполняется четырехсекундный переход по размеру шрифта с двухсекундной задержкой между моментом мышивания пользователем над элементом и началом анимационного эффекта:
Пример нескольких анимированных свойств
CSS Content
Когда списки значений свойств имеют разную длину
Если список значений какого-либо свойства короче других,его значения повторяются,чтобы сделать их соответствующими.Например:
С этим обращаются так,как будто это так:
Точно так же, если список значений какого-либо свойства длиннее, чем для transition-property , он усекается, поэтому если у вас есть следующий CSS:
Это интерпретируется как:
Использование переходов при подсветке меню
Обычным использованием CSS является выделение элементов в меню,так как пользователь навешивает на них курсор мыши.Простые переходы делают эффект еще более привлекательным.
Сначала мы настроили меню с помощью HTML:
Затем мы создаем CSS,чтобы реализовать внешний вид и функциональность нашего меню:
Этот CSS определяет внешний вид меню, при этом цвет фона и текста меняется, когда элемент находится в состояниях :hover и :focus :
JavaScript examples
Примечание. Следует соблюдать осторожность при использовании перехода сразу после:
- добавление элемента в DOM с помощью .appendChild()
- удаление display: none; элемента : нет; свойство.
Это обрабатывается так, как если бы начальное состояние никогда не возникало и элемент всегда находился в своем конечном состоянии. Простой способ обойти это ограничение — применить setTimeout() за несколько миллисекунд до изменения свойства CSS, к которому вы собираетесь перейти.
Использование переходов для обеспечения гладкой функциональности JavaScript
Переходы-это отличный инструмент для того,чтобы все выглядело намного более гладко,без необходимости что-либо делать с функциональностью JavaScript.Возьмем следующий пример.
С помощью JavaScript можно добиться эффекта перемещения мяча в определенную позицию:
С помощью CSS вы можете сделать его плавным без лишних усилий.Добавьте переход к элементу,и любое изменение будет происходить плавно:
Обнаружение начала и завершения перехода
Вы можете использовать событие transitionend , чтобы определить, что анимация закончилась. Это объект TransitionEvent , который имеет два дополнительных свойства помимо типичного объекта Event :
Строка,указывающая на имя свойства CSS,переход которого завершен.
Число с плавающей запятой, указывающее количество секунд, в течение которых выполнялся переход в момент возникновения события. Это значение не зависит от значения transition-delay .
Как обычно, вы можете использовать метод addEventListener() для мониторинга этого события:
Вы определяете начало перехода, используя transitionrun (срабатывает до любой задержки) и transitionstart (срабатывает после любой задержки) таким же образом:
Примечание: transitionend событие не срабатывает , если переход прерывается до перехода завершен , поскольку либо элемент изготовлен display : none или значение свойства оживляющего никогда изменяется.
Неверно что для такого свойства css как transition
Переход (transition) представляет анимацию от одного стиля к другому в течение определенного периода времени.
Для создания перехода необходимы прежде всего два набора свойств CSS: начальный стиль, который будет иметь элемент в начале перехода, и конечный стиль — результат перехода. Так, рассмотрим простейший переход:
Итак, здесь анимируется свойство background-color элемента div. При наведении указателя мыши на элемент он будет менять цвет с серого на красный. А при увеении указателя мыши с пространства элемента будет возвращаться исходный цвет.
Чтобы указать свойство как анимируемое, его название передается свойству transition-property
Вообще анимировать можно множество разных свойств, такие как color, background-color, border-color. Полный список свойств CSS, которые поддаются анимации, можно найти по адресу www.w3.org/TR/css3-transitions/#animatable-properties
Далее идет установка времени перехода в секундах с помощью свойства transition-duration :
Кроме секунд можно устанавливать значения в миллисекундах, например, 500 миллисекунд:
И в конце нам надо определить инициатор действия и финальное значение анимируемого свойства background-color. Инициатор представляет действие, которое приводит к изменению одного стиля на другой. В CSS для запуска перехода можно применять псевдоклассы. Например, здесь для создания перехода используется стиль для псевдокласса :hover . То есть при наведении указателя мыши на элемент div, будет срабатывать переход.
Кроме псевдокласса :hover можно использовать и другие псевдоклассы, например, :active (ссылка в нажатом состоянии) или :focus (получение элементом фокуса).
Также для запуска перехода можно использовать код JavaScript.
Анимация набора свойств
При необходимости мы можем анимировать сразу несколько свойств CSS. Так, в выше приведенном примере изменим стили следующем образом:
Здесь анимируются сразу четыре свойства. Причем анимация для них всех длится 2 секунды, но мы можем для каждого свойства задать свое время:
Подобно тому как в свойстве transition-property через запятую идет перечисление анимируемых свойств, в свойстве transition-duration идет перечисление через запятую временных периодов для анимации этих свойств. Причем сопоставление времени определенному свойству идет по позиции, то есть свойство width будет анимироваться 3 секунды.
Кроме перечисления через запятую всех анимируемых свойств мы можем просто указать ключевое слово all :
Теперь будут анимироваться все необходимые свойства, которые меняют значения в стиле для псевдокласса :hover .
Функции анимации
Свойства transition-timing-function позволяет контролировать скорость хода и выполнение анимации. То есть данное свойство отвечет за то, как и в какие моменты времени анимация будет ускоряться или замедляться.
В качестве значения это свойство может принимать одну из функций:
linear : линейная функция плавности, изменение свойства происходит равномерно по времени
ease : функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение
ease-in : функция плавности, при которой происходит только ускорение в начале
ease-out : функция плавности, при которой происходит только ускорение в конце анимации
ease-in-out : функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение
cubic-bezier : для анимации применяется кубическая функция Безье
Применим функцию ease-in-out :
Для использования кубической Безье в функцию cubic-bezier необходимо передать ряд значений:
Задержка перехода
Свойство transition-delay позволяет определить задержку перед выполнением перехода:
Временной период также указывается в секундах (s) или миллисекундах (ms).
Свойство transition
Свойство transition представляет сокращенную запись выше рассмотренных свойств. Например, следующее описание свойств: