Переходы в CSS


Содержание

CSS3 — переходы

Представленные в данной статье примеры переходов вы можете протестировать на странице «Примеры переходов».

Добавление в CSS псевдоклассов сделало жизнь легче для всех веб-разработчиков. Теперь они могут создавать интерактивные эффекты с помощью псевдоклассов :hover и :focus, не прибегая к использованию сценариев JavaScript. Например, чтобы создать меняющуюся кнопку (т.е. кнопку, реагирующую на наведение курсора мыши), достаточно просто предоставить набор новых свойств стиля для псевдокласса :hover. Эти свойства задействуются автоматически, когда пользователь наводит курсор на кнопку.

Какими бы не были псевдоклассы замечательными, они больше не являются передовой технологией. Проблема с ними состоит в их характере типа «все или ничего». Например, настройки стиля псевдокласса :hover активируются сразу же при наведении курсора на элемент, т.е. происходит резкий скачок из одного стиля в другой. А вот в приложениях Flash, Silverlight или в прикладных программах эффект обычно более утонченный. Здесь кнопка при наведении курсора может менять цвет, сдвигаться или подсвечиваться, но делается это с использованием тонкой анимации, занимающей долю секунды.

Некоторые веб-разработчики начинают использовать подобные эффекты в своих работах, но для этого обычно требуется прибегать к помощи системы анимации JavaScript от сторонних разработчиков. А теперь CSS3 предоставляет им более простой способ — новую возможность переходов, позволяющую осуществлять плавный переход от одного набора стилей к другому.

Простой цветовой переход

Чтобы понять принцип работы переходов, нужно рассмотреть реальный пример. Такой пример показан на рисунке ниже, где изменение цвета кнопки при наведении на нее курсора осуществляется с помощью возможностей перехода CSS3:

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

Смену цвета без эффекта перехода можно реализовать следующим кодом:

А этот код создает кнопку, которая форматируется только что описанным стилем:

Чтобы получить плавное изменение цвета, т.е. переход, нам нужно в только что описанный стиль добавить свойство transition. (Обратите внимание, что это свойство вставляется в обычный стиль (в данном случае стиль slickButton), а не в псевдокласс :hover.)

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

Как вы, несомненно, заметили, в предыдущем коде в стиль были добавлены три свойства transition, вместо обговариваемого одного. Это потому, что стандарт переходов CSS3 все еще находится в процессе разработки и поддерживающие его браузеры требуют применения префиксов разработчиков. Таким образом, чтобы переход работал в браузерах Chrome, Safari, Firefox и Opera, нужно установить три значения свойства transition, добавляя к каждому из них свой префикс разработчика. А для Internet Explorer 10 (который, как ожидается, будет поддерживать переходы) нужно будет добавить еще одну версию свойства, с префиксом -ms-. К сожалению, использование экспериментальных свойств может породить неопрятные таблицы стилей.

Так, в данном примере присутствует один мелкий недостаток, а именно, в активированной кнопке меняются два элемента оформления — цвет самой кнопки и цвет текста на ней. Но эффект перехода применяется только к цвету фона кнопки, в результате чего смена цвета текста происходит мгновенно, в то время как цвет фона кнопки меняется постепенно.

Эту проблему можно решить двумя способами. При первом подходе свойству transition присваивается список переходов, разделенных запятыми:

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

На момент написания этих строк переходы поддерживались браузерами начиная с Opera 10.5 и Firefox 4, а также всеми версиями Safari и Chrome, с которыми вам когда-либо приходилось работать. Браузер Internet Explorer поддерживает переходы начиная с версии 10. Отсутствие поддержки переходов — не такая и большая проблема, как может показаться, т.к. браузер все равно меняет стили. Только эта смена происходит почти мгновенно, а не с растянутым во времени переходом. А это уже хорошая новость, т.к. веб-сайт может использовать переходы и в то же самое время сохранять основные визуальные стили для старых браузеров.

Задержка и комбинирование эффектов перехода

В эффектах перехода можно использовать свойство transition-delay, которое задерживает начало перехода на указанное время:

Теперь анимация перехода при наведении указателя мыши будет задерживаться на две секунды. То же самое произойдет и при отведении указателя мыши. Значение свойства transition-delay можно указывать в самом свойстве transition, как необязательный параметр:

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

Это правило гораздо сложнее рассмотренных ранее. Во-первых здесь мы анимируем сразу 4 свойства указанные в transition-property. Во-вторых одним из анимируемых свойств является трансформация масштаба, которая позволяет при наведении курсора мыши на кнопку плавно увеличить ее в размерах, создавая очень красивый эффект.

Использование функций замедления

Переход можно настроить более тонко. Для этого можно использовать свойство transition-timing-function, которое позволяет изменять скорость перехода в процессе его осуществления. Например, начало перехода может быть медленным с последующим ускорением, или наоборот, быстрый переход в начале и замедленный в конце. Для коротких переходов это свойство не играет большой роли. Но в длинных и более сложных анимациях оно может изменить общее восприятие эффекта.

Функции замедления не являются каким-то инновационным средством CSS3, они уже давно используются в WPF и Silverlight (Инерционность движения).

Свойство transition-timing-function использует функцию cubic-bezier() для задания функции замедления через кривую Безье. Кривая Безье определяется двумя точками: начальное смещение и конечное смещение. Чтобы понять это давайте рассмотрим пример определения простой кривой Безье:

Этой функции соответствует следующий график:

Как видите здесь две точки с координатами (0.42, 0) и (0.58, 1) задают вид кривой Безье. Если вы укажите данную функцию замедления в предыдущем примере, то все эффекты перехода будут сначала выполняться чуть медленее, потом скорость будет больше и в конце перехода скорость снова уменьшится (согласно графику).

Понимание логики построения кривых Безье позволяет создавать практически бесконечное разнообразие пользовательских функций смягчения для анимаций CSS3. Есть даже возможность задавать отрицательные значения или значения, превышающие 1, для создания чрезвычайно кривых смягчений, например:

Опробуйте этот эффект на примере кнопки, гарантирую, результат вам понравиться.

В свойстве transition-timing-function можно использовать несколько стандартных значений, которые определяют некоторые значения функции cubic-bezier:

Стандартные значения функций кривых Безье, используемые в свойстве transition-timing-function

Значение График Функция cubic-bezier() Описание
linear 0, 0, 1, 1 Немедленный старт и остановка, анимация происходит с постоянной скоростью
easy 0.25, 0.1, 0.25, 1 Быстрый старт и быстрое ускорение, медленный переход с замедлением в конце
ease-in 0.42, 0, 1, 1 Медленный старт с нарастающим ускорением и резкой остановкой в конце
ease-out 0, 0, 0.58, 1 Обычный старт с замедлением в конце
ease-in-out 0.42, 0, 0.58, 1 Медленный старт с небольшим ускорением, скорость перехода постоянная, в конце происходит замедление

Шаги анимации

Кроме функций замедления, элемент можно анимировать используя шаги, т.е. ступенчато. (Примером может послужить секундная стрелка часов, которая сначала двигается, а затем осуществляется задержка на 1 секунду, потом снова двигается и снова задержка и т.д.) Шаги задаются с помощью функции steps(). Ниже показан пример:

Теперь анимация увеличения кнопки будет проходить рывками. Задержка между рывками в данном случае будет 667ms (2000/3). Второй параметр функции steps указывает, будет ли рывок выполняться сразу или после задержки:

Свойство CSS Transition

Свойство CSS Transition нужен для установки анимационного перехода из одного состояния в другое. Анимация работает с помощью псевдоэлементов :hover и :active , т.е. при переходе объекта из одного состояния в другое.

Синтаксис CSS transition

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

Примеры со свойством Transition

Пример #1. Анимация в html через transition

На странице преобразуется в следующее

Илон Маск рекомендует:  Функции bios int 1ch пользовательское прерывание по таймеру

Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:

Код transition: all 1s linear означает следующее:

  • all — плавное действие применяется ко всем свойствам, это касается цвета (color), фона (background). Вместо all можно было написать color , тогда плавный переход распространился бы только на цвет
  • 1s — время в течении которого осуществляется переход (можно задавать в формате милисекунд: 1000ms);
  • linear — объект изменяется с постоянной скоростью (линейно). Есть и другие варианты эффектов (о них будет рассказано чуть ниже)


Чтобы все остальные объекты не смещались из-за увеличивающегося квадрата, можно использовать свойство свойство transform.

Пример #2. Увеличение объекта в html без смещения других объектов

На странице преобразуется в следующее

Теперь объект увеличивается и не происходит смещения других объектов.

Рассмотрим детально какие значения может принимать каждый из параметров

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

1. Параметр transition-property

Свойство transition-property отвечает за части свойств объекта, к которым будет применена анимация. Может принимать следующие значения

  • all — ко всему объекту (можно опустить, если задано время)
  • color — к цвету текста
  • background — к цвету фона объекта
  • width , height — к изменению габаритов по ширине и высоте соответственно
  • none — анимация отсутствует (по умолчанию стоит у каждого элемента)

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

2. Параметр transition-duration

Определяет количество времени в течении которого длится трансформация. Измеряется в секунда (s) и милисекундах (ms).

Параметр transition-duration можно задавать отдельным свойством в CSS:

3. Параметр transition-timing-function

Это важнейший параметр, который определяет как изменяется скорость трансформации. Например, в начале с замедленинем, или же в конце.

Где value может принимать значения:

  • ease (значение по умолчанию) — замедление во время старта и финиша, равносильно параметру cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • linear — равномерная скорость на протяжении всей трансформации, равносильно параметру cubic-bezier(0.0, 0.0, 1.0, 1.0)
  • ease-in — замедление в начале, равносильно параметру cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out — замедление в конце, равносильно параметру cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out — замедление при старте и в конце (похож на ease, но с другими коэффициентами скорости), равносильно параметру cubic-bezier(0.42, 0, 0.58, 1.0)
  • step-start — мгновенный старт, равносильно параметру steps(1, start)
  • step-end — мгновенное исполнение в конце, равносильно параметру steps(1, end)
  • cubic-bezier(a1,b1,a2,b2) — задание собственного изменения скорости
  • steps(a,b) — изменение рывками

CSS3: анимация против переходов

В CSS3 есть две техники визуализации, которые соревнуются за ваше внимание: анимация (Animations) и переходы (Transitions) (примечание: в статье будут использованы русские варианты названий этих техник). В этой статье мы попробуем выявить сходства и различия этих техник, чтобы вы понимали, когда лучше использовать тот или иной способ.

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

Сходства

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

  • определять CSS-свойства, которые мы хотим изменять;
  • устанавливать вид математической функции для управления скоростью перехода от одного значения к другому;
  • указывать продолжительность перехода или анимации;
  • перехватывать события анимации и переходов и делать с ними все, что угодно;
  • визуализировать изменения CSS-свойств.

На этом сходства заканчиваются и начинаются…

Различия

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

Запуск

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

Переход запускается, когда изменяется какое-либо CSS-свойство. Наиболее часто встречается использование псевдокласса :hover для изменения значения свойства CSS:

В приведенном выше примере используется переход, а результатом будет расширение круга на определенную величину при наведении на него курсора мыши. Другим способом запуска перехода является использование JavaScript, чтобы программным путем добавлять или удалять CSS-классы, симулируя изменение значений свойств CSS. И, наконец, можно с помощью JavaScript задать inline-стиль меняющий CSS-свойство, которое « слушает » ваш переход.

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

С помощью имеющегося свойства, анимацию можно перевести в статус паузы ( pause ), что означает, что она будет неактивна до тех пор, пока свойство не будет переведено в статус запущено ( running ). Консорциум W3C решил удалить это свойство, поэтому сейчас его уже не существует.

Зацикливание

Это очень просто. Анимация может быть легко зациклена с помощью установки свойства animation-iteration-count. Вы можете задать любое фиксированное число для повтора анимации, которое пожелаете:

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

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

Определение промежуточных точек / ключевых кадров (keyframes)

С помощью анимации вы можете определить ключевые кадры, которые дадут вам больше контроля над значениями CSS-свойств, нежели просто начальная и конечная точка:

Вы можете задать любое количество ключевых кадров. В процессе воспроизведения анимации, каждый кадр будет изменять нужным образом значения свойств. Это позволяет вам реализовывать разнообразные виды анимации, которые позволяют HTML5 соревноваться наравне с такими анимационными технологиями, как Flash, и даже быть эффективнее.

При использовании переходов у вас нет достаточного контроля над конечным результатом:

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

Явное определение анимируемых свойств

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

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

Например, у вас есть следующий переход:

В коде выше, указаны различные значения свойств background-color и width . Однако, явно определен переход только для свойства background-color. Это значит, что браузер будет анимировать только изменение свойства background-color.

Если же необходимо, чтобы анимированы были оба свойства — и background-color , и width — следует это явно определить:

Что насчет параметра «all» при определении перехода?


В действительности, нет необходимости определять каждое анимируемое свойство при объявлении перехода. Вы можете облегчить себе жизнь, если будете использовать значение « all » вместо описания конкретных свойств, например: transition: all .5s ease-in . Однако так поступать не рекомендуется, потому что такой подход наносит ущерб производительности.

В этом случае браузер наблюдает за всеми свойствами, которые могут быть анимированы, вместо того, чтобы следить за явно указанными. Если у вас нет необходимости в использовании параметра « all », то рекомендуется указывать все анимируемые свойства по отдельности.

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

В примере выше, свойства height и background-color будут плавно изменяться в соответствии с определенными ключевыми кадрами, даже если какое-то свойство до этого не было объявлено!

Взаимодействие с JavaScript

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

Этот сценарий лучше всего работает, когда вы точно знаете, какого результата хотите достичь. Однако, может случиться так, что вам потребуется изменять значения, используемые для анимации, согласно какому-то внешнему источнику — к примеру клику мыши, результату внешнего вычисления и тому подобное.

Для такого взаимодействия не подходят величины, заранее определенные в CSS. Можно положиться на использование JavaScript, но полностью реализовывать анимацию на нем, задача достаточно сложная. Наиболее оптимальным решением в данной ситуации будет использование гибридного подхода. Это означает, что анимация или переход объявляются средствами CSS, но некоторые аспекты динамически изменяются посредством JavaScript.

Когда дело доходит до взаимодействия JavaScript и анимации/переходов, то вы почти всегда будете использовать именно переходы. При связке анимация-JavaScript… практически невозможно заставить анимацию нормально работать.

Анимация очень специфична для создания связки с JavaScript. Команда @keyframes четко определяет последовательность анимации, которая запускается сразу после загрузки страницы. Попытка изменить заданную анимацию через JavaScript потребует выполнения очень сложной последовательности шагов, включая модификацию самого стилевого правила @keyframes. Если вы когда-нибудь пытались изменять CSS-свойства внутри стилевого правила, то вы, скорее всего, представляете сложность данной процедуры.

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

Это изменение может быть выполнено через JavaScript: вы можете изменить CSS-свойство, которое « слушает » ваш переход, обратившись к inline-стилю :

Переход не обращает внимания на то, каким способом изменяются значения «слушаемых» свойств. Пока значение изменяется, переход будет работать. Это значит, что вы можете делать много интересных вещей с интерактивными сценариями, не связанными жестко заданными начальными и конечными точками. Желаемые значения свойств для перехода могут быть заданы через JavaScript.

Чтобы лучше понять, о чем идет речь, посмотрите вот этот простой пример :

Илон Маск рекомендует:  Зачем нужен word-spacing

Кликните в любой точке серой формы и круг переместится в эту точку.

Этот пример работает достаточно просто. Перемещение круга обрабатывается с помощью CSS-перехода. Однако, координаты точки, в которую надо переместить круг, передаются через JavaScript. Так как переход « слушает » координаты, то любое их изменение ведет к запуску этого перехода. Конечный результат работы именно такой, каким он и был задуман.

Самое примечательное, что не требуется писать JavaScript-код для реализации самого перехода. И, наконец, так как поддержка переходов встроена в стандарт CSS и, соответственно, в браузер, анимация происходит очень плавно.

Эта дружба между переходами и JavaScript очень сильна, поэтому вам стоит использовать это преимущество на полную катушку.

Заключение

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

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

Конечно, имя терпение и хорошее знание JavaScript, можно нейтрализовать различия между переходами и анимацией.

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

Данная публикация представляет собой перевод статьи « CSS3: Animations vs. Transitions » , подготовленной дружной командой проекта Интернет-технологии.ру

CSS свойство transition

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

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

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

CSS синтаксис

Возможные значения

Значение Описание
transition-property Определяет CSS свойство, для которого будет применён эффект перехода.
transition-duration Определяет продолжительность эффекта перехода в секундах (s) или миллисекундах (ms).
transition-timing-function Определяет кривую скорости для эффекта перехода.
transition-delay Определяет задержку, когда начнётся эффект перехода.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Сделаем, чтобы при наведении мышки на элемент

Переходы в CSS

Переходы в CSS

Здравствуйте! От трансформаций в CSS перейдем к переходам да простят меня за тавтологию. Переход (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 представляет сокращенную запись выше рассмотренных свойств. Например, следующее описание свойств:

Будет аналогично следующей записи:

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Свойство CSS transition

Автор: Ярослав Перелыгин / Дата: 20/11/2012

Блог Ярослава Перелыгина

CSS3 дарит нам новые красивости и приятности. В некоторых случаях для создания какого-либо необычного эффекта больше не нужно прибегать к использованию flash и javascript. Свойство CSS transition является ярким примером одной из таких ситуаций. Думаю, всем известен псевдокласс :hover. При помощи него меняются значения CSS свойств элемента при наведении на него мышкой. К примеру, был блок серого цвета с черной надписью, навел на него мышкой, и он стал черным с белой надписью.

Вот, как это прописывается:

А вот, как это выглядит:

Можно также сделать, чтобы блок при наведении на него, помимо цвета фона и цвета текста, менял также и ширину. Для этого запишем CSS код так:

Вот, как это будет выглядеть в данном случае:

Все бы ничего, но, как видите, свойства меняют свои значения слишком резко, в тот же миг, и это выглядит не очень красиво. Что делать? Все очень просто: используем свойство CSS transition.

О свойстве transition

Свойство transition придает переходу от одних стилей к другим плавность. К примеру, цвет блока при наведении на него мышкой изменится не резко, а в течение определенного времени. Transition, кстати, в переводе на русский означает «переход». Свойство имеет следующую запись:

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

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

В transition-property задается свойство, на которое будет распространяться действие перехода. К примеру: color, background-color, width, height, left, opacity, visibility и многие другие. Можно указать несколько свойств через запятую. Если вы хотите применить переход сразу для всех возможных свойств, тогда у transition-property следует указать значение all. В transition-duration указывается время, в течение которого будет осуществляться переход, в transition-delay время, через которое переход начнется. В transition-timing-function указывается тип перехода, на этом свойстве остановимся подробнее.

Подробнее о transition-timing-function

Свойство transition-timing-function определяет, как будут изменяться промежуточные значения в течение перехода, другими словами, как будет меняться скорость перехода в течение времени, которое задано в свойстве transition-duration. К примеру, переход может начаться быстро, но под конец замедлиться, или же не менять своей скорости в течение всего времени. Transition-timing-function может иметь следующие значения:

  • linear — скорость перехода не меняется от начала и до конца. Эквивалентна cubic-bezier(0,0,1,1).
  • ease — медленный старт, затем ускорение и замедление в конце. Эквивалентна cubic-bezier(0.25,0.1,0.25,1).
  • ease-in — медленный старт. Эквивалентна cubic-bezier(0.42,0,1,1).
  • ease-out — замедление в конце. Эквивалентна cubic-bezier(0,0,0.58,1).
  • ease-in-out — медленный старт и финиш. Эквивалентна cubic-bezier(0.42,0,0.58,1).
  • cubic-bezier(n,n,n,n) — позволяет задать собственные значения от 0 до 1.

Наведите на следующий блок мышкой и посмотрите сами, как осуществляется переход при той или иной функции.

Как видите, в зависимости от того, какое значение имеет свойство transition-timing-function, переход может осуществляться совершенно по-разному. Хотя иногда эта разница является не очень заметной, к примеру, если в transition-duration задано небольшое временное значение, или блок, для которого осуществляется эффект, имеет маленькие габариты и так далее.

Примеры использования свойства transition

Чтобы вам легче было разобраться, как правильно применять свойство transition, приведу несколько примеров. Начну, пожалуй, с самого простого. Помните блок с меняющейся шириной и цветом при наведении на него в самом начале поста? Давайте теперь сделаем тоже самое только с использованием свойства transition.
Пример 1.

В примере была применена линейная функция, далее в посте буду использовать именно ее. Вы же естественно можете применять совершенно любую. В transition-property было использовано значение all, то есть все возможные свойства, а именно цвет фона, цвет текста и ширина, меняли свои значения в течение одинакового времени и с использованием одной и той же функции. Чтобы каждое свойство менялось по-разному, нужно прописывать их через запятую с разными значениями. Вот так:

В данном случае все свойства меняли свои значения по очереди, начиная с цвета фона и заканчивая шириной. У каждого свойства была задана своя функция.
Пример 2.
С цветами и размерами разобрались. Теперь давайте сделаем исчезающий в движении блок.

При помощи свойств opacity и margin-left блок движется и исчезает в течение двух секунд.
Пример 3.
Еще один простой пример. На этот раз у текста появляется тень белого цвета, хотя в данном случае она напоминает скорее подсветку, чем тень, но свойство называется именно так.

Реализовали мы это при помощи свойства text-shadow.
Пример 4.
Немного усложним задачу, заставим блок крутиться.

Согласитесь, смотрится неплохо, и сразу даже не догадаешься, что это удалось сделать лишь посредством CSS. В примере, кстати, использовалось еще одно новое свойство transform. Многие браузеры читают его только при помощи вендорных префиксов. Обратите внимание, что их нужно указывать и в значении свойства transition. Обязательно подпишитесь на обновления моего блога, чтобы узнать про свойство transform еще больше. Вскоре ему будет посвящена отдельная статья, как и многим другим свойствам.
Пример 5.
Свойство CSS transition, кстати, неплохо себя показывает и в сочетании с псевдоклассом :active. Блок в данном примере должен будет увеличиваться при нажатии и удержании на нем курсора мыши. Проверим?

Для реализации этого примера нужно было всего лишь увеличить значения ширины и высоты в блоке с псевдоклассом :active.

Способов использования свойства CSS transition на самом деле очень и очень много, уверен, в будущем их станет еще больше. Я привел лишь самые простые примеры, чтобы продемонстрировать transition в действии. Ссылки, кстати, на моем блоге меняют свой цвет при наведении на них мышкой именно при помощи него. Думаю, я вам порядком надоел серым прямоугольником, но зато на нем удалось отлично показать все, что я хотел. В сочетании с другими свойствами и графикой transition может вытворять очень красивые вещи. Пробуйте!

8 простых переходов CSS3, которые поразят ваших пользователей

Дата публикации: 2014-06-09

От автора: CSS3 предоставил UX-дизайнерам бесчисленные возможности, и лучше всего то, что самые классные штучки действительно легко внедряются. Всего парой строк кода можно добиться поразительного эффекта перехода, который впечатлит ваших пользователей, увлечет их и при правильном применении завершит ваше преображение. Кроме того, эти эффекты ускоряются аппаратным обеспечением и прогрессивным улучшением, которые вы можете использовать прямо сейчас.

Вот 8 реально простых эффектов, которые оживят пользовательский интерфейс и порадуют ваших пользователей. Все эти эффекты (панель один) контролируются свойством transition. Чтобы увидеть их в деле, мы определим на странице HTML div:

Переходы в CSS3

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

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

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

-moz-transition: — moz-transform 1s ease-in-out 0.5s; — webkit-transition: — webkit-transform 1s ease-in-out 0.5s;

Как видно из листинга 3.26, свойство transition принимает до четырех параметров, разделенных пробелами. Первое значение представляет свойство, на базе которого будет создаваться переход. Его необходимо указывать, так как одновременно могут меняться несколько свойств, а нам, вероятно, нужно создать шаги только для одного из них. Второй параметр устанавливает время, за которое должен произойти переход из начального положения в конечное. Третьим параметром может выступать любое из пяти ключевых слов: ease, linear, ease-in, ease-out и ease-in-out. Эти ключевые слова определяют, на основе какой кривой Безье будет выполняться процесс перехода. Каждое ключевое слово представляет отдельную кривую Безье, и единственный способ узнать, какая из них лучше всего подходит именно для вашего перехода, — протестировать все варианты на экране. Последний параметр свойства transition — это задержка. Он определяет, какова будет пауза перед началом перехода. Для того чтобы переход охватывал все меняющиеся свойства данного объекта, необходимо указать ключевое слово all. Также можно явно объявить все участвующие свойства, просто перечислив их через запятую.

Замените кодом из листинга 3.26 соответствующий код в листинге 3.11 и проверьте результат в своем браузере.

В листинге 3.26 мы создали переход для изменений, определяемых свойством transform. Однако свойство transition поддерживает не все свойства CSS, а список поддерживаемых, вероятно, со временем будет меняться. Вам придется самостоятельно тестировать их или изучать веб-сайты производителей соответствующих браузеров для получения дополнительной информации о поддержке.


transition

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

12.0+ 10.0+ 16.0+ 26.0+ 12.1+ 6.1+

Описание

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

Свойство transition объявляется вместе с остальными стилями элемента. При каждом изменении значения свойства, указанного в качестве целевого, изменения будут происходить постепенно. Чаще всего transition применяется для плавного изменения вида элемента при наведении на него курсора, но также его можно применять совместно с JavaScript (например, если вид элемента был изменён путём добавления класса или иным образом).

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

Значение по умолчанию: all 0 ease 0
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.transition=»width 2s»

Синтаксис

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

Значение Описание
transition-property Указывает CSS-свойство, для которого будет применён эффект перехода.
transition-duration Указывает, продолжительность эффекта перехода в секундах(s) или миллисекундах(ms).
transition-timing-function Задаёт кривую скорости для эффекта перехода.
transition-delay Указывает, когда начнётся эффект перехода.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

Результат данного примера:

Наведите на красный квадрат, чтобы увидеть эффект перехода.

WebComplex – самостоятельное создание сайтов

Все о самостоятельном создании сайта

CSS3 как использовать свойство transition?

В этой статье мы разберем, как использовать свойство CSS3 – transition.

Свойство transition дает нам возможность контролировать параметры эффекта перехода.

Как работает свойство transition?

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

Эффект перехода поддерживается не во всех браузерах.

Interne Explorer: не поддерживает.

Firefox: -moz-transition.

Safari и Chrome: -webkit-transition.

Opera: -o-transition.

По-этому CSS3 код будет следующий.

Но для того чтобы эффект перехода заработал, нам необходимо добавить стили поведения нашего блока при наведении (:hover) или фокусировки (:focus).

Именно для блока с псевдо-классом :hover (:focus) надо описать свойства которые примет наш блок (элемент) после окончания эффекта перехода.

Добавим же эти стили:

Результат

Определения и использование

У эффекта перехода есть четыре свойства:

transition-property, transition-duration, transition-timing-function и transition-delay.

Примечание: Всегда задавайте значение продолжительности перехода transition-duration в противном случае продолжительность будет равна нулю и все прочие эффекты не сработают.

Значения по-умолчанию: all 0 ease 0
Наследуется: нет
Версия: CSS3
JavaScript синтаксис: object.style.transition=”width 2s”

Синтаксис

Значение Описание
transition-property определяет название(-я) CSS свойств(-а) для которого (-ых) применяется эффект перехода
transition-duration Продолжительность эффекта в секундах или миллисекундах
transition-timing-function Определяет скорость кривой эффекта перехода
transition-delay Определяет время начала эффекта перехода (задержка перед стартом)

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

1. Transition-property

Давайте в начале посмотрим на синтаксис:

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

Примеры использования transition-property:

2. Transition-duration

В этом свойстве мы задаем время, необходимое для завершения эффекта перехода.

Примеры использования transition-duration:

Если указать отрицательное значение, то оно будет восприниматься как ноль.

3. Transition-timing-function

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

Пример использования transition-timing-function:

В примере ниже покажем поведение всех временных функций

Илон Маск рекомендует:  Faq хранитель экрана (screen saver)
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL