Свойство transition

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

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

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

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

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

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

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

Firefox: -moz-transition.

Safari и Chrome: -webkit-transition.

Opera: -o-transition.

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

.transbox { width: 50px; height: 50px; border:1px solid #333; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s; }

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

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

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

.transbox:hover{ width: 500px; height:50px; background: #69c; box-shadow: 0 0 10px #333; }

Результат

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

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

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

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

Значения по-умолчанию:

Наследуется:

Версия:

JavaScript синтаксис:

all 0 ease 0
нет
CSS3
object.style.transition=”width 2s”

 Синтаксис

transition: property duration timing-function delay;

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

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

1. Transition-property

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

transition-property: none | all | [ ] [, ]*

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

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

transition-property: all; transition-property: none; transition-property: background-color; transition-property: background-color, height, width;

2. Transition-duration

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

transition-duration: [, ]*

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

transition-duration: 2s; transition-duration: 4000ms; transition-duration: 4000ms, 8000ms;

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

3. Transition-timing-function

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

transition-timing-function: [, ]* = ease | linear | ease-in | ease-out | ease-in-out или = cubic-bezier(, , , )

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

transition-timing-function: ease; transition-timing-function: ease, linear; transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.8);

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

 4. Transition-delay

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

transition-delay: [, ]*

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

transition-delay: 5s; transition-delay: 4000ms, 8000ms; transition-delay: -5s;

В завершение статьи о эффектах перехода в CSS3

Источник: https://webcomplex.com.ua/css/css3-kak-ispolzovat-svojstvo-transition.html

Новое свойство CSS3 transition

Дата добавления: 2011-10-16



Свойство transition относится к новым свойствам CSS3. Познакомимся с ним поближе.

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

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

CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.

Иными словами, CSS Transitions позволяют назначать изменения свойств CSS плавно и в течение некоторого времени.

Применять свойство transition можно к чему угодно — фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы :focus и :active.

Браузеры

Сразу скажу о браузерах — новый стандарт еще не принят, поэтому на данный момент необходимо использовать префиксы -webkit-, -moz- и -o-. Отсюда видно, что свойство поддерживают браузеры Chrome, Safari, Opera 10.5+, Firefox 4+. Наш «любимый» Internet Explorer как всегда не у дел, пользователь просто не увидит никакой анимации.

В этой статье я использовал префикс -webkit-, поэтому все приведенные здесь примеры будут работать только в Chrome и Safari.

Рассмотрим простой пример — добавим плавный переход фона ссылки

Для начала вспомним, как делается обычная смена цвета ссылки при наведении мышкой.

Проверим. Создадим две тестовые ссылки

Сайт для разработчиков

Сайт для пользователей

При наведении мышки на ссылку фон поменяет свой цвет со светло-синего на тёмно-синий, а цвет шрифта — с черного на белый.

Обратите внимание

Теперь воспользуемся свойством CSS transition для плавной смены фона у ссылки. Создадим новый класс, который будет идентичен классу simple и добавим несколько новых строчек:

a.cool { padding: 5px 10px; background: #69f; color: #000; -webkit-transition-property: background; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease;
} a.cool:hover { background: #33f; color: #fff;
}

Создаем еще пару тестовых ссылок и посмотрим на результат:

Сайт для разработчиков

Сайт для пользователей

Теперь наш фон плавно меняет цвет в течение полусекунды! Из примера видно, что мы добавили три новые строчки со свойствами -webkit-transition-property, -webkit-transition-duration, -webkit-transition-timing-function.

На самом деле, их можно объединить в одно свойство:

-webkit-transition: background 0.5s ease;

Также можно добавить плавное изменение цвета текста:

a.cool2 { padding: 5px 10px; background: #69f; color: #000; -webkit-transition: background 0.5s ease, color 1.0s ease;
} a.cool2:hover { background: #33f; color: #fff;
}

Данный код при наведении мышки будет плавно менять цвет фона в течение полусекунды и цвет шрифта в течение 1 секунды. Проверяем:

Сайт для веб-мастеров

Если мы будем использовать одинаковые параметры для анимации, то можно использовать выражение:
-webkit-transition: all 0.5s ease;

Теперь Transition-эффект будет применяться ко всем изменяющимся свойствам с одинаковыми параметрами — 0.5 секунд, ease-эффект.

Можно также добавить задержку для эффекта при помощи transition-delay:

a.cool3 { padding: 5px 10px; background: #69f; color: #000; -webkit-transition: all 0.5s ease; -webkit-transition-delay: 0.5s;
} a.cool3:hover { background: #33f; color: #fff;
}

Теперь анимация будет работать через полсекунды после наведения мышки. Проверим на всякий случай:

Блог

Справочная таблица

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

transition-propertyСвойство, к которому применяем анимацию. Практически любое свойство CSS: color, background, width, font-size и т.д.transition-durationДлительность анимации. Время в секундах.transition-timing-functionВременная функция, используемая для анимации: ease, linear, ease-in-out, ease-in, ease-out, cubic-beziertransition-delayЗадержка анимации. Время в секундах.

Дополнительные материалы

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

Источник: http://webmaster.alexanderklimov.ru/view_articles.php?id=42

Свойство transition: анимационные переходы — учебник CSS

Переходы в CSS — это именно то, что помогает «вдохнуть жизнь» в неподвижную и скучную веб-страницу и анимировать ее. Смена одних CSS-стилей другими через заданный промежуток времени и с определенной скоростью — это и есть задача свойства transition.

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

Рекомендуем взглянуть на примеры CSS-переходов в нашей отдельной статье.

Как создать переход transition

Чтобы реализовать переход в CSS, необходимо записать два стиля для элемента — начальный и конечный. Также к начальному стилю дописывается свойство transition с необходимыми настройками для осуществления перехода.

И, наконец, чтобы воспроизвести переход, понадобится «спусковой крючок», который запустит анимацию. Самый простой пример такого «спускового крючка» — это псевдокласс :hover. В этом случае переход от начального стиля к конечному будет происходить при наведении курсора на элемент.

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

С какими стилями срабатывает transition

Во-первых, анимированию поддаются все трансформации (scale(), rotate(), skew() и т. д.). Во-вторых, можно создавать переходы между значениями таких свойств, как color, background, width, height, opacity и т. д. Весь перечень можно посмотреть на сайте W3.org.

Кроссбраузерность

Свойство transition понимают следующие версии браузеров:

  • IE 10+;
  • Edge 12+;
  • Firefox 5–15 (с префиксом -moz-), Firefox 16+ (без префикса);
  • Chrome 4–25 (с префиксом -webkit-), Chrome 26+ (без префикса);
  • Safari 5.1–6 (с префиксом -webkit-), Safari 6.1+ (без префикса);
  • Opera 12.1+.

Мобильные браузеры также хорошо поддерживают данное свойство (оно не работает лишь в Opera Mini). Ранние версии таких мобильных браузеров, как iOS Safari и Android Browser, распознают свойство transition при указании префикса -webkit-.

Для наилучшего обеспечения кроссбраузерности рекомендуется добавлять вендорные префиксы при использовании свойства transition.

Из каких свойств состоит transition

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

  • transition-property — указывает, для какого стиля будет действовать переход;
  • transition-duration — определяет длительность анимации;
  • transition-timing-function — скорость хода анимации;
  • transition-delay — время ожидания перед началом перехода.

На следующей странице мы разберем первое свойство из списка — transition-property.

Источник: https://idg.net.ua/blog/uchebnik-css/ispolzovanie-css/css3-transition

Использование свойства Transition в CSS3

С приходом CSS3, нам стало доступно больше новых функций и свойств CSS, которые используются для различных эффектов, одним из самых интересных и полезных является свойство(property) Transition.

Transition является важным новым явлением в CSS. Это свойство может быть использовано для создания динамического эффекта изменения DIV или CLASS, используя простую структуру:

transition: property duration timing-function delay;

Этот CSS эффект – отличный способ добавить анимацию на сайте, без использования Javascript или jQuery!

Описываем свойство

Важно

Первое, что нам нужно сделать – указать параметры свойства Transition. Наиболее популярные – это ширина(width) и высота(height). Код выглядит следующим образом:

transition-property: width;

Изменяем размер DIV

Изначально, нам также нужно указать стартовое значение параметра width.
В нашем примере, в параметрах свойства мы будем изменять ширину при наведении курсора. Установим первоначальную ширину DIV в 300px, а при наведении курсора в 640px:

#demotransition { transition-property:width; width:300px; } #demotransition:hover { width:640px; }

Длительность

Добавляем время, за которое должна быть показана анимация:

transition-duration: duration;

Предположим, мы хотим указать время как 0.5 секунды, тогда в нашем примере код будет выглядеть следующим образом:

#demotransition { transition-property:width; transition-duration:0.5s; width:300px; } #demotransition:hover { width:640px; }

Функция тайминга

Уже на данном этапе наш код достаточен для достижения эффекта, но мы также можем использовать дополнительные параметры, чтобы сделать эффект еще более привлекательным. Параметр transition-timimg-function позволяет нам замедлить или увеличить скорость анимации. Доступные параметры: ease, ease-in, ease-out, ease-in-out.

В нашем примере мы используем ease-in-out для замедления анимации:

#demotransition { transition-property:width; transition-timing-function:ease-in-out; transition-duration:0.5s; width:300px; } #demotransition:hover { width:640px; }

Задержка

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

transition-delay: time;

Заключение

Подводя итог, нужно отметить две вещи при использовании Transition:

  • Первое, большинству браузеров необходим префикс при описании CSS (исключения IE10, Opera и Firefox16+):

-moz-transition: для Firefox 15 -webkit-transition: для Chrome и Safari

Следует принять во внимание, что IE9 и предыдущие версии не отображают это свойство вообще.

  • Второе, для оптимизации кода, следует описывать свойство сокращенным inline кодом:

#demotransition { -moz-transition: width ease-in-out 0.5s 0.1s; /* Firefox 15 */ -webkit-transition: width ease-in-out 0.5s 0.1s; /* Chrome, Safari */ transition: width ease-in-out 0.5s 0.1s; width:300px; } #demotransition:hover { width:640px; } #demotransition { -moz-transition: width ease-in-out 0.5s 0.1s; /* Firefox 15 */ -webkit-transition: width ease-in-out 0.5s 0.1s; /* Chrome, Safari */ transition: width ease-in-out 0.5s 0.1s; width:300px; } #demotransition:hover { width:640px; }

Высоких вам конверсий!

Источник: https://lpgenerator.ru/blog/2016/03/03/ispolzovanie-svojstva-transition-v-css3/

Помните про «transition: all»

Часто, при исследовании кода CSS3, можно обнаружить строки, подобные нижеприведенному примеру (префиксы браузеров опущены для наглядности):

.element { width: 400px; height: 400px; transition: width 1s ease-in; } .element:hover { width: 500px; }

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

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

.element { width: 400px; height: 400px; transition: width 1s ease-in, height 1s ease-in; } .element:hover { width: 500px; height: 500px; }

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

.element { width: 400px; height: 400px; transition: all 1s ease-in; } .element:hover { width: 500px; height: 500px; }

Здесь используется ключевое слово all для определения того, что все свойства будут трансформироваться. В действительности ключевое слово “all” используется по умолчанию для свойства transition-property, так что можно еще более сократить запись:

.element { width: 400px; height: 400px; transition: 1s ease-in; }

Данный код будет производить те же действия — трансформация и высоты и ширины (и любого другого свойства, которое может быть добавлено позже). Интерсно, что для короткой записи требуется только указание длительности, так что можно оставить transition: 1s, и все должно работать также, за исключением использования функции «easy» по умолчанию для transition-timing-function.

Также следует упомянуть, что сейчас ведутся дискуссии по поводу замены значения по умолчанию с “all” на “none”.

Где может быть полезна данная техника?

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

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

Но с одной оговоркой. Для всех свойств используются одинаковые временные функции и длительность трансформации.

Источник: https://ruseller.com/lessons.php?id=1307&rub=2

Эффекты в CSS3: свойство transition

Друзья, здравствуйте.

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

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

Свойство применяется к элементу и имеет следующий вид:

transition: [свойство] [время анимации] [тип анимации] [задержка]

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

Совет

transition: [свойство1] [время анимации] [тип анимации] [задержка], [свойство2] [время анимации] [тип анимации] [задержка],

Чтобы стало чуть понятнее, более полный листинг:

div { background-color:#f00; width: 150px; } div:hover { transition: width 1s linear 0s; width: 250px; }

Изначально элемент div имеет ширину 150px. При наведении мыша ширина элемента в течение 1 секунды увеличивается до 250px.

Теперь разберём в деталях каждый из параметров.

Свойство

Это обычное CSS свойство, например, width, height, background-color и т. п., для которого осуществляется переход.

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

Время анимации

Целое или дробное значение секунд или миллисекунд (s или ms), задающее продолжительность анимации.

Задержка

Задаёт отсрочку (время начала) анимации. Может принимать значения, аналогичным из предыдущего пункта — s или ms.

Тип анимации

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

Шаговые эффекты

Определены следующие значения:

  • steps — заданное число шагов. Общий вид:steps([число], [значение]) [число] — сколько раз изменятся свойства. Например, если начальная ширина имеет значение 50px, а конечная — 150px, то при 2 шагах, на каждом шаге к начальному значению будет добавлять по 50px: шаг № 1 — 100px, шаг № 2 — 200px.[значение] — одно из ключевых слов — start или end. Принципиальное отличие заключается во времени приращения. Допустим, время равняется двум секундам. Для start приращение применяется в начале каждого тика, для end — в конце. Если непонятно, поэкспериментируйте с формой ниже.
  • step-start — анимация отсутствует, свойство немедленно принимает конечное значение (аналогично простому :hover без данного свойства). Соответствует steps(1, start).
  • step-end — анимация отсутствует, свойство принимает конечное значение при окончании заданного времени анимации. Соответствует steps(1, end).

Собственная функция

Примечательно, что она всего одна — cubic-bezier. Однако за такой простотой и скрывается вся мощь. Вызов функции имеет вид:

cubic-bezier(x1, y1, x2, y2)

За основу движения берётся кубическая кривая Безье. Вообще, для построения этой линии нужно 8 точек. Но 4 у нас есть: 2 начальное положение, условно обозначаемое [0,0], 2 конечное — [1,1].

Остальные точки являются промежуточными. x1 и x2 — время, в интервале от нуля до единицы, где одному соответствует время анимации (то значение, которое задали).

А вот y1 и y2 могут принимать любые величины, при этом 0 — исходное значение свойста, 1 — окончательное.

https://www.youtube.com/watch?v=BHbZpjRx1Cg

Углубляться в принцип построения нет смысла — кому интересно, могут почитать статью на Вики.

Предопределённые эффекты

Удивительно, но указанные значения являются вариациями на основе cubic-bezier.

  • linear — равномерная скорость. В точности соответствует cubic-bezier(0, 0, 1, 1). Например, если начальная ширина элемента равна 20px, а конечная — 30px, время анимации задано как 1 секунда, то такждые 100 миллисекунд ширина элемента будет изменяться на 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 в разрезе

И вот мы начитались теории. Однако лучше один раз увидеть, чем сто раз представить, как всё работает.

Форма ниже позволит наглядно представить, как выглядит конечный эффект. По горизонтали отмечается время, по вертикали — степень изменения свойства. Значения 0 соответствуют началу, 1 — концу (финальной установке).

По вертикали значениям y разрешается выходить за границы «единичного квадрата». А это значит, что свойство может изменяться сверх заданных границ, и даже в какой-то момент времени возвращаться вплоть до исходного состояния и даже дальше.

Обратите внимание

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

Цветом циан (морской волны) отмечена первая точка из доступных (x1,y1), жёлтым — вторая точка (x1,y1). Числа в блоках рядом — соответствующие значения. В общем, экспериментируйте.

Время

Продвижение

0,0

1,1

Всё это должно работать в браузерах Firefox, Chrome, новых Opera и Internet Explorer 10+.

Если есть вопросы — велкам в комментарии.

(1

Источник: https://a-panov.ru/css3-transition/

transition

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

transitionЗначения:

Начальное значение:

Область применения:

Наследование:

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

Версия CSS:

Примечание:
нет
нет
все элементы, псевдоэлементы :before и :after
нет
Internet Explorer 10+ (-ms), Chrome 1+ (-webkit), Opera 10.5+, Safari 3+ (-webkit), Firefox 1+ (-moz)
CSS 3

Значения

transitionСокращенное свойства для указания значений всех четырех свойств в одноtransition-propertyОпределяет имя свойства CSS для которого применяется эффектПо умолчанию — alltransition-durationОпределяет длительность эффектаПо умолчанию — 0transition-timing-functionОпределяет как будет изменяться скорость во время переходаПо умолчанию — easetransition-delayОпределяет задержку до начала эффектаПо умолчанию — 0

Синтаксис

transition: [ || || || ]

Пример

ДЕМО
Первый пример представляет плавное изменение высоты блочного элемента за 1 секунду

div { transition: height 1s; -webkit-transition: height 1s; /* Safari and Chrome */ -moz-transition: height 1s; /* Firefox 4 */ -o-transition: height 1s; /* Opera */ }

аналогично можно сделать и для изменения ширины

div { transition: width 2s; -webkit-transition: width 2s; /* Safari and Chrome */ -moz-transition: width 2s; /* Firefox 4 */ -o-transition: width 2s; /* Opera */ }

Если не указать длительность transition-duration эффекта, то переход будет мгновенным, так как значение длительности по-умолчанию 0.
А вот значение по-умолчанию для transition-property является all, так что если его не указывать, то анимации будет подвержены все изменения стилей (пример 3). Анимация начинается только после изменения свойств объекта посредством псевдоклассов.

В приведенном ниже примере при наведении мыши на блоки (div:hover) изменяются их размеры

div { width:100px; height:100px; transition: width 2s; -webkit-transition: width 2s; /* Safari and Chrome */ -moz-transition: width 2s; /* Firefox 4 */ -o-transition: width 2s; /* Opera */ div:hover { width:200px; }

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

В примере ниже ширина блока при наведении на него курсора мыши увеличивается за полсекунду, а возвращается в исходное состояние за 3 секунды.

div { width:100px; height:100px; transition: width 3s; -webkit-transition: width 3s; /* Safari and Chrome */ -moz-transition: width 3s; /* Firefox 4 */ -o-transition: width 3s; /* Opera */ } div:hover { width:200px; transition: width 1s; -webkit-transition: width 1s; /* Safari and Chrome */ -moz-transition: width 1s; /* Firefox 4 */ -o-transition: width 1s; /* Opera */ }

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

div { transition: width 2s, height 2s, background 2s; -moz-transition: width 2s, height 2s, background 2s; -webkit-transition: width 2s, height 2s, background 2s; -o-transition: width 2s, height 2s, background 2s; }

И напоследок разберемся еще с оним свойством CSS3 transition, которое мы еще не применяли.

transition-timing-function — описывает, как будут рассчитываться промежуточные значения перехода от начального положения (состояния) к конечному.

Важно

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

easeбыстрый переход;linearлинейный переход;ease-inплавное начало;ease-outплавный конец;ease-in-outплавные начало и конец;cubic-bezierзависит от введенных вручную значений (cubic-bezier(х1,у1,х2,у2)).

На примерах 6-11 можно посмотреть все значения этого свойства в действии.

Источник: http://populyarno.com/spravochnik-css/transition/

Анимация CSS. Введение + свойство transition

Всем привет. Недавно наткнулся на серию очень полезных и интересных видеоуроков на тему «CSS анимация».

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

Поэтому я решил перевести для вас эти уроки (точнее сделать вольный перевод). Не стоит благодарить. Итак:

  1. CSS анимация. Введение + свойство transition (эта статья)
  2. CSS анимация. Кейфреймы (keyframes) — скоро будет
  3. Когда и зачем использовать CSS анимации? — скоро будет

Что такое CSS анимация?

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

Анимации в вебе преследуют две основные идеи. Первая идея – оживить что-то. Вы как будто доктор Франкенштейн. У вас есть безжизненный монстр, и вы вдыхаете в него жизнь. Вторая – визуализация движения. И ключевое слово тут именно «движение».

Как анимировать?

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

Второй инструмент – это свойство animation в паре с кейфреймами (@keyframes – ключевые кадры). Этот инструмент мы более подробно остановимся в следующем уроке, а прямо сейчас мы рассмотрим свойство CSS transition.

И еще потом мы поговорим о том, что нужно анимировать на странице (когда это нужно пользователю), а что не стоит анимировать (когда анимация выглядит тупо и неуместно), основываясь на пользовательском опыте (UX — user experience).

Свойство CSS transition – параметры и значения

Синтаксис

Для начала, давайте посмотрим, как читается это свойство, и разберем его синтаксис. Мы пишем это свойство примерно так:

Мы присваиваем это свойство тому элементу, который мы хотим анимировать. Этот элемент получает плавный переход (или пошаговый) между несколькими своими состояниями (например, высота 100 пикселей и высота 200 пикселей). И то, как будет выглядеть этот переход (с англ. transition), будет зависеть от параметров, которые мы ему зададим.

Первым параметром (значением) свойства transition является другое свойство анимируемого элемента (например, height).

Вторым параметром является длительность (продолжительность) анимации, то есть, сколько времени займет переход элемента из одного состояния в другое (например, 2s или 2000ms).

Третий параметр – это тайминг функция [timing function] (изинг функция [easing function]). То, как интенсивность анимации распределится на протяжении всего времени. Например, анимация может резко начаться, а под конец замедлиться и плавно закончить переход.

Могут использоваться как ключевые слова (например, ease, ease-in-out, linear), так и функции кубика Безье (например,  cubic-bezier(0.17, 0.67, 0.83, 0.67)). Кубик Безье вы можете легко и удобно настраивать на этом ресурсе http://cubic-bezier.com , а также функция steps для того, чтобы создать покадровую анимацию (пошаговую).

Ну и наконец, параметр задержка. Задержка анимации – это время, которое необходимо подождать, прежде чем анимация (в нашем случае — переход) начнется.

Пример анимации CSS transition

Давайте рассмотрим такой пример CSS анимации:

Тут мы анимируем только свойство opacity (непрозрачность). Это означает, что если у элемента, который мы собираемся анимировать, есть и другие свойства, например, высота, ширина или цвет, и даже, если эти свойства отличаются в разных состояниях элемента, то плавный переход (анимация) будет только у свойства opacity. Понимаете?

Вместо конкретного свойства можно использовать также ключевое слово «all». Это означает, что мы анимируем абсолютно все свойства элемента, которые были изменены в новом состоянии элемента (а не только opacity), и которые вообще можно анимировать. Потому что, как вам известно, не все свойства можно анимировать. Но об этом немного позже.

Второй параметр (300ms) говорит нам о том, что анимация продлится всего 300 миллисекунд. То есть элемент быстро появится или быстро растворится, в зависимости от значений свойств в двух его состояниях.

Тайминг функция (ease-in-out) третьим параметром сделает начало и конец анимации более плавными.

Задержка (1s) показывает на сколько должна опоздать анимации перед ее срабатыванием.

Совет

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

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

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

Что можно анимировать в CSS?

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

Анимируемые свойства

Взять, к примеру, такие свойства, как:

  1. font-size;
  2. background-color;
  3. width;
  4. left (на какое расстояние от левой стороны элемент может быть перемещен [спозиционирован]…

Очевидно, анимировать эти свойства имеет смысл. Если вы измените их значения, это изменит элемент визуально. Если вы измените размер шрифта, скажем, с 14 до 28 пикселей, вы увидите, что шрифт плавно увеличился, произошла анимация, которая длилась какое-то время.

Анимация всегда имеет смысл, если значение свойств это четкие (чаще всего числовые) значения. Если вы увеличите размер шрифта до 100 пикселей, то вы явно увидите, как буквы растут.

Плавное изменение цвета фона также можно пронаблюдать [потому что цвет в вебе имеет числовой код, например, красный rgb(255,0,0)]. Эти свойства являются анимируемыми.

Вообще запомните, если вы представить, что это анимируется – значит это можно анимировать. Чаще всего это работает.

Не анимируемые свойства

А вот список свойств, которые нельзя анимировать (пример):

  1. display;
  2. font-family;
  3. position…

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

Возьмем display. Можете ли вы представить, как визуально будет происходить изменение между «display: block;» и «display: inline-block;»? Как может плавно измениться внешний вид элемента между «position: relative;» и «position: absolute;»? Нет, конечно же, элемент будет выглядеть иначе при изменении этих свойств.

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

Производительность анимации в CSS

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

В общем вот вещи, которые наиболее хорошо подходят для анимации:

  1. Позиционирование на странице
  2. Масштабирование
  3. Вращение
  4. Прозрачность

Причем, первые три пункта этого списка, это все параметры свойства transform (translate, scale, rotate). Позиционирование происходит по осям X и Y.

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

Давайте резюмируем этот пункт следующим. Старайтесь избегать перерисовки элементов на веб странице и анимации элементов, которые браузеру сложно отрендерить (например, тени).

Как сделать анимацию в CSS?

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

Это не сложно и для этого есть много разных способов. Но есть 2 основных, которые вы должны освоить в обязательном порядке. Первый способ – это анимация при наведении на элемент (псевдокласс :hover). Вы наводите курсор мыши на элемент, и срабатывает анимация. Таким образом можно анимировать сам элемент или любой из его дочерних элементов.

Потом я покажу вам, как это работает. Второй способ – это изменение класса элемента. То есть у вас есть обычный элемент, вы меняете (или добавляете) его класс на класс, который имеет совсем другие стили. Если добавить класс произойдет анимация, и если убрать класс, произойдет обратная анимация.

Это хороший способ для анимирования меню или выпадающих списков.

Послесловие

Мы рассмотрели все, что нам нужно для создания анимации на чистом CSS. Совсем скоро мы разберем практические примеры, а чуть позже – очень интересные примеры.

Источник: http://digital-boom.ru/coding/css-haki/animation-css-transition.html

8 простых эффектов с использованием свойства CSS3 Transition

Здравствуйте, уважаемые читатели XoZbloga! CSS3 внёс бесчисленные количество новшеств для дизайнеров, и большинство из них очень легки в применении. Достаточно описать пару строк кода, что даст вам удивительный анимационный эффект, который будет на загляденье всем посетителям и поспособствует их активности на сайте.

В этой статье рассмотрим 8 простых эффектов с использованием CSS3 свойства — Transition. Если вам нужен красивый и функциональный сайт, сделанный с использованием современных технологий, то не задумывайтесь — обратитесь к специалистам http://stfalcon.com/en/services/web-development.

Они помогут вам реализовать любой сложный проект.

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

На текущий момент CSS3 Transition поддерживается множеством браузеров. Более подробно Вы можете узнать об этом здесь.

Подготовка

Все далее описанные анимационные эффекты выполнены на блоке DIV. Итак, для начала опишем базовые свойства для блока:

.experiment{    width:400px;    height:200px;    background:#676470;    /* главное свойство */    transition:all 0.3s ease;}

Значение свойства Transition состоит и 3 составляющих: transition-property — all, transition-duration — 0.3s и третьей величины, transition-timing-function — ease, также есть еще одна составляющая (transition-delay далее в таблице).

НаименованиеОписаниеЗначение
transition-property Свойство, к которому применяем анимацию Практически любое свойство CSS: color, background, width, font-size и т.д. all — все свойства.
transition-duration Длительность анимации Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.
transition-timing-function Временная функция, используемая для анимации ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delay Задержка анимации Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.

Теперь переходим к эффектам.

1. Затемнение

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

.fade{    opacity:0.5;}.fade:hover{    opacity:1;}

Далее живой пример:

2. Смена цвета

Еще один из наиболее популярных эффектов — смена цвета элемента:

.color:hover{    background:#53a7ea;}

3. Внутренняя граница

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

.border:hover{    box-shadow: inset 0 0 0 20px #53a7ea;}

4. Изменение формы

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

.circle:hover{    border-radius:50%;}

5. Увеличение и уменьшение

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

.grow:hover{    -webkit-transform: scale(1.3);    -ms-transform: scale(1.3);    transform: scale(1.3);}

Уменьшение элемента выполняется так же просто, как и увеличение. Чтобы увеличить элемент мы указываем значение больше 1, чтобы уменьшить его, мы указываем значение меньше 1:

.shrink:hover{    -webkit-transform: scale(0.8);    -ms-transform: scale(0.8);    transform: scale(0.8);}

6. Поворот

CSS3 Transform имеют целый ряд различных вариантов использования, один из лучших — поворот элемента:

.rotate:hover{    -webkit-transform: rotateZ(-30deg);    -ms-transform: rotateZ(-30deg);    transform: rotateZ(-30deg);}

7. 3D тень

Не так давно стало популярно использовать в дизайне веб-сайтов 3D тени на ряду с Flat дизайном. Сам же эффект тени и выпуклости достигается за счет плавного смещения элемента по горизонтали и добавления тени. Примерно вот так:

.threed:hover{    box-shadow:           1px 1px #53a7ea,           2px 2px #53a7ea,           3px 3px #53a7ea;    -webkit-transform: translateX(-3px);    transform: translateX(-3px);}

8. Колебание

На последок пожалуй самый сложный из представленных вариант реализации анимации с помощью CSS3. Будет выполнен целый комплекс действий над элементом, и все это благодаря правилу @keyframes, и свойствам animation и animation-iteration. Сначала описываем анимацию CSS свойств (используем для Chrome префикс -webkit):

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 @-webkit-keyframes swing{    15%    {        -webkit-transform: translateX(5px);        transform: translateX(5px);    }    30%    {        -webkit-transform: translateX(-5px);       transform: translateX(-5px);    }    50%    {        -webkit-transform: translateX(3px);        transform: translateX(3px);    }    65%    {        -webkit-transform: translateX(-3px);        transform: translateX(-3px);    }    80%    {        -webkit-transform: translateX(2px);        transform: translateX(2px);    }    100%    {        -webkit-transform: translateX(0);        transform: translateX(0);    }}@keyframes swing{    15%    {        -webkit-transform: translateX(5px);        transform: translateX(5px);    }    30%    {        -webkit-transform: translateX(-5px);        transform: translateX(-5px);    }    50%    {        -webkit-transform: translateX(3px);        transform: translateX(3px);    }    65%    {        -webkit-transform: translateX(-3px);        transform: translateX(-3px);    }    80%    {        -webkit-transform: translateX(2px);        transform: translateX(2px);    }    100%    {        -webkit-transform: translateX(0);        transform: translateX(0);    }}

Эта анимация просто перемещает элемент влево и вправо:

.swing:hover{    -webkit-animation: swing 1s ease;    animation: swing 1s ease;    -webkit-animation-iteration-count: 1;    animation-iteration-count: 1;}

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

Источник: http://xozblog.ru/2015/01/8-simple-css3-transitions/

CSS Transitions: описание, свойства и особенности использования :

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

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

Место переходов CSS

По сложившемуся мнению, место CSS Transitions в псевдокласе :hover и обратно. Есть стиль тега, например TagStyle, и есть стиль TagStyle:hover. Задача псевдокласса — поместить содержимое всех правил второго описания в первое, как только мышка окажется над тегом, а как только она уйдет — вернуть все обратно.

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

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

Содержание правила перехода

Задача правила: выполнить плавный переход других правил из одного состояние в другое, поэтому CSS Transitions включает в себя (transition='*'):

  • наименование свойства, на которое влияет (*-property);
  • длительность процесса (*-duration);
  • функцию перехода (*-timing-function);
  • задержку начала процесса (*-delay).

Допускается короткая запись правила по канонам CSS:

  • transition: all 1s ease .5s;

Переход применяется ко всем правилам, выполняется за одну секунду в стиле 'ease' с задержкой в полсекунды. Все то же самое, записанное по элементам правила:

  • *-property: all;
  • *-duration: 1s;
  • *-timing-function: ease;
  • *-delay: .5s;

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

Классическое применение

Самое простое и часто используемое — это переход цвета фона (символа): CSS Transition: background:

В этом примере только к правилу background-color будет применено правило перехода (длительность 2 секунды, функция ease-out, задержка 0.2 секунды), а остальные правила перейдут в другое состояние моментально.

Функция (стиль) перехода

Важная составляющая правила CSS Transitions — функция перехода, то есть кривая времени, как выполнять переход из одного состояния в другое. Плавный вариант (easy) — это значение по умолчанию: переход начинается медленно, разгоняется и замедляется в конце.

Значение 'linear' определяет равномерный переход: 'ease-in' — начинает переход медленно, затем плавно ускоряется к конце, а 'ease-out' — действует наоборот.

Функция cubic-bezier (x1, y1, x2, y2) позволяет создать свой вариант перехода, но воспользоваться официальными ресурсами и сайтами, имеющими хороший опыт использования кривой Безье, все же предпочтительнее. Что-то новое придумать наверняка не получится, а опыт приятных глазу и психологии посетителя вариантов накоплен все же немалый.

Совмещение перехода с преобразованием

Хороший эффект дает комбинация правил CSS Transition & Transform. Первое определяет время процесса, второе показывает, что делать все это время.

Преобразования позволяют перемещать теги, вращать их, изменять размеры, менять позицию. Рассмотрим комбинацию:

  • transform: rotate(180deg);
    • transition: all 2s ease-out .2s;

За две секунды она перевернет содержимое тега на 180 градусов. Эксперементируя с функциями translate, scale, rotate, skew и их вариациями, можно достичь интересных эффектов и придать своей работе неповторимую оригинальность.

CSS3 позволяет также выполнять преобразование 3d, то есть перемещать тег в координатах xyz, что в сочетации с CSS Transitions позволяет вращать тексты и фигуры, как это необходимо для достижения поставленной цели.

Совместимость с правилом перехода

Если использовать CSS Transitions для background, border, color и других очевидно визуальных правил нормально, естественно и удобно, то для некоторых случаев, например, попытки совместить CSS Transition & Display, можно просто потратить время и не достичь желаемого.

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

Сделать красивое вращение фигуры или текста в течение определенного времени — действие, которое имеет малое отношение к тому, что дает свойство display, visibility, z-index.

Обратите внимание

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

Правило перехода — это не только :hover и обратно, его можно с успехом применить и к другим псевдоклассам, например :focus или :active.

Вообще, Transition и Transform — это те возможности CSS, которые по логике вещей не имеют к нему прямого отношения (все же речь идет о стилях, а не о алгоритмах). Но за последние несколько лет акценты так сместились, что не использовать богатый арсенал CSS и CSS3 просто непозволительная роскошь.

О ненормальном и естественном

На заре персональных компьютеров, когда для математических вычислений выпускался математический процессор, было ненормально иметь 386-й компьютер без математического сопроцессора, когда речь шла об эффективном применении Fortran-программы для расчета пути на Луну. Естественно, сегодня никому в голову не приходит, покупая компьютер, спрашивать имеет ли он аппаратно реализованные средства для математических вычислений.

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

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

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

Но если всех это устраивает, если это удобно и эффективно, то, быть может, имеет смысл изменить собственные представления. Видимо, именно CSS Transition & Transform сделают такую маленькую революцию: не нужно программировать то, что уже давно не нуждается в этом.

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

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

Важно

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

Источник: https://www.syl.ru/article/298429/css-transitions-opisanie-svoystva-i-osobennosti-ispolzovaniya

Ссылка на основную публикацию