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


Оглавление (нажмите, чтобы открыть):

Как придать индивидуальность веб-странице
используя переходы и анимацию CSS3

П рогрессивно развивающиеся HTML5 и CSS3 позволяют веб-мастерам создавать всё более интерактивные веб-страницы. С помощью функций CSS3 Transitions и CSS3 Animations можно легко добавить индивидуальности при создании своего сайта.

Содержание:

Функция CSS3 Transitions

Функция CSS3 Transitions заключается в плавном изменении одного значения свойства CSS на другое. Другими словами, переходы CSS позволяют плавно изменять одно анимированное состояние на другое в течение заданного времени.

Рассмотрим следующую разметку:

#img <
opacity : 1;
transition-property : opacity ;
transition-duration : 2s ;
transition-delay : 0s ;
transition-timing-function : linear ;
>

Что же из этого следует? А вот что. Если переместить курсор на изображение, то оно начнёт плавно исчезать ( transition-property : opacity ) в течении 2 секунд ( transition-duration : 2s ), без задержки во времени ( transition-delay : 0s ).

Рассмотрим свойства вызывающие переход:

  • transition-property — указывает имя свойства CSS для эффекта перехода. Эффект перехода обычно происходит тогда, когда пользователь наводит курсор на элемент. Значение по умолчанию «all».
  • transition-duration — определяет, сколько секунд (s) или миллисекунд (ms) необходимое для завершения эффекта перехода. По умолчанию значение равно нулю, что означает, что переход происходит мгновенно.
  • transition-delay — определяет, когда эффект перехода начнется. Значение transition-delay указывается в секундах (s) или в миллисекундах (ms). Время может быть отрицательным, в этом случае переход начинается на полпути от его продолжительности. Значение по умолчанию равно нулю.
  • transition-timing-function — задает скорость эффекта перехода. Это свойство позволяет изменять скорость в течении эффекта перехода.

Далее на простом примере посмотрим, как затухание одного изображения приводит к появлению другого. Ниже приведена разметка, которая решает эту задачу:

#imageWrapper <
display : inline-block ;
width : 320px ;
height : 240px ;
box-shadow : 2px 2px 5px 0px gray ;
position : relative ;
>

#imageWrapper img <
width : 320px ;
height : 240px ;
position : absolute ;
transition-property : opacity ;
transition-duration : 2s ;
transition-timing-function : linear ;
>

#imageWrapper #frontImage, #imageWrapper:hover #backImage <
opacity : 1 ;
>

#imageWrapper:hover #frontImage, #imageWrapper #backImage <
opacity : 0 ;
>

Вот что получилось из этой разметки:

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

Функция CSS3 Animations

CSS3 Анимация похожа на CSS3 Transitions в том, что они плавно анимации значения CSS с течением времени. Различия (а) как один указывает свойства анимации, (б) каким запускает анимацию и (в) сложность анимации возможно.

Эффект анимации осуществляется с использованием “@keyframes ”. Эффект анимации позволяет элементу постепенно изменяться от одного стиля к другому. Можно изменить столько стилей, сколько вы хотите. Столько раз, сколько вы хотите.

@keyframes fadeOut <
from <
opacity : 1 ;
>
to <
opacity : 0 ;
>
>

#img <
animation-duration : 2s ;
animation-delay : 0s ;
animation-timing-function : linear ;
animation-fill-mode : forwards ;
>

Многие из этих свойств знакомы из обсуждения переходов. Новыми являются:

  • animation-fill-mode — значение forwards указывает браузеру, что следует остановить анимацию на последнем кадре по окончанию последнего повтора и не отматывать ее к первоначальному состтоянию.
  • animation-name — указывает имя keyframe, которое вы хотите связать с селектором.
  • animation-timing-function — указывает скорость анимации. Кривая скорости определяет время анимации, которое используются для перехода от одного набора стилей CSS к другому. Используется для плавного изменения скорости.

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

Это позволяет программировать такие эффекты, как показано в разметке и примере ниже:

#bouncingImage <
width : 320px ;
height : 240px ;
box-shadow : 2px 2px 5px 0px gray ;
animation-duration : 2s ;
animation-timing-function : ease-in-out ;
animation-fill-mode : forwards ;
>

#bouncingImage:hover <
animation-name : zoomInBounce ;
>

@keyframes zoomInBounce <
from <
transform : scale(1) ;
>

40% <
transform : scale(1.15) ;
>

50% <
transform : scale(1.35) ;
>

80% <
transform : scale(1.225) ;
>

90% <
transform : scale(1.275) ;
>

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

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

Анимация на CSS3 (transition, transform, animation)

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

Анимация на CSS3 с помощью transition

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

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

transition : свойство скорость_анимации временная_функция задержка

Самый банальный вариант анимации на CSS3 — преобразование цвета блока при наведении. Посмотрим как это получится transition и без него:

• Используя transition. (Цвет фона меняется плавно.)

• Без transition. (Цвета заменяют друг друга мгновенно.)


Свойство transition простое и понятное. Хочу только остановиться на одном из его параметров — временной функции. Эта функция задается с помощью кривой Безье (cubic-bezier), которая принимает 4 значения (x1,y1,x2,y2) — координаты направляющих точек.

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

Трансформация на CSS3 (transform)

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

Например, используем поворот transform : rotate( ) :

Или же смещение transform : translate(x, y) :

Также можно применить масштаб transform : scale(x, y) :

И еще наклон transform : skewX[Y]( ) :

Более сложные трюки с анимацией на CSS3 (animation, @keyframes)

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

Речь идет о следующем: хотелось на некотором сайте сделать один блок постоянно вращающимся. Конечно, первая мысль – написать пару строчек на JavaScript, но до сегодняшнего дня меня успели убедить в том, что такой подход неправильный и даже некрутой! Пришлось искать другие пути.

Итак, я узнала о CSS-свойствах animation и @keyframes. Действительно очень полезная для анимации на CSS3 штука!

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

@keyframes, в свою очередь, вмещает разные состояния анимируемого элемента, как бы точки отсчета. Первым параметром animation принимает имя @keyframes. Выглядит это, примерно, вот так:

Для моей задачи – постоянно вращающийся блок на CSS3 – хватило задать только конечное положение элемента (to). Но в @keyframes можно задавать и начальное положение (from), и любые промежуточные в процентах. Это пригодится для создания более сложных анимаций.

Я придумала что-то такое:

* Будьте внимательны! В примере кода опущены префиксы для разных браузеров!

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

Посмотрите сайты с CSS-анимацией, которые мне понравились:

CSS3 переходы, трансформации и анимации

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

В настоящее время, если вам потребуется анимировать элементы на веб-странице, то вы, скорее всего, либо напишете собственный JavaScript-код, обеспечивающий выполнение требуемого действия, либо обратитесь к популярной JavaScript-библиотеке вроде jQuery, которой поручите всю тяжелую работу Однако разработчики, увлекающиеся CSS3, явно не согласны с засильем JavaScript в этой области и надеются, что ситуация вскоре изменится. Несмотря на то что версия CSS3 вряд ли узурпирует «власть» jQuery или чего-то в этом роде в ближайшее время, она идеально подходит для обеспечения плавных переходов (например, при наведении указателя мыши) и перемещения элементов по экрану Это отличная новость, поскольку она означает, что при увеличении количества замечательных современных браузеров, устанавливаемых на устройствах (например, на новейших смартфонах), мы можем использовать CSS для обеспечения анимаций вместо того, чтобы задействовать для этого JavaScript.

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

В этой главе мы поговорим о следующем:

— что такое CSS3-переходы и как их можно использовать;

— как писать CSS3-переходы и их сокращенный синтаксис;

— как применять временные функции для контроля над плавностью выполнения CSS3-переходов (ease, cubic-bezier и др.);

— как устанавливать занятные переходы для адаптивных сайтов;

— что такое CSS3-трансформации и как мы можем их использовать;

— как добавлять разные 2D-трансформации (scale, rotate, skew, translate и др.);

— что такое 3D-трансформации и как их обеспечить;

— как добавить анимацию с помощью CSS3 (с использованием @keyframes).

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

Итак, я понимаю, как выполнять как CSS3-переходы, так и анимации. Что непонятно, и я googled, когда использовать.

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

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

Этот эффект может быть достигнут посредством таких переходов:

Или, используя такие анимации:

С HTML, который выглядит так:

И этот сопровождающий jQuery script:

Что я хотел бы понять, каковы плюсы и минусы этих подходов.

  • Одно очевидное отличие заключается в том, что анимация занимает намного больше кода.
  • Анимация дает лучшую гибкость. У меня может быть разная анимация для выскакивания и
  • Есть ли что-то, что можно сказать о производительности. Обе используют преимущества ускорения h/w?
  • Что более современно и как идти вперед.
  • Что еще вы можете добавить?

7 ответов

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

Мастер Йода рекомендует:  Как определить оригинальность фотографии и была ли она отредактирована

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


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

Я дам определениям самим говорить (по словам Мерриама-Вебстера):

Переход: движение, развитие или эволюция из одной формы, стадии или стиля в другой

Анимация: наделена жизнью или качествами жизни; полный движения

Имена соответствующим образом соответствуют их целям в CSS

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

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

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

Анимация — это просто абстракции переходов, поэтому, если переход на аппаратное ускорение, анимация будет. Это не имеет значения.

Оба очень современные.

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

Краткий ответ, прямо на точку:

  1. Требуется запускающий элемент (: hover,: focus и т.д.)
  2. Только 2 состояния анимации (начало и конец)
  3. Используется для более простой анимации (кнопки, выпадающие меню и т.д.)
  4. Легче создавать, но не так много возможностей анимации/эффектов
  1. Может использоваться для бесконечной анимации
  2. Можно установить более 2 состояний
  3. Не имеющий границ

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

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

Переходы с другой стороны указывают, как свойство (или свойства) должно выполнить их изменение. Каждое изменение. Установка нового значения для определенного свойства, будь то с помощью JavaScript или CSS, всегда является переходом, но по умолчанию она негладкая. Установив transition в стиле css, вы определяете другой (плавный) способ выполнения этих изменений.

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

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

В современных браузерах ч/б ускорение происходит для свойств filter , opacity и transform . Это как для CSS-анимации, так и для CSS-переходов.

Цикл уроков о переходах CSS3, часть 1: Основы. Что такое переходы?

20 декабря 2014 | Опубликовано в css | Нет комментариев »

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

Анимация = Активность = JavaScript?

Один из доводов против переходов CSS3 – то, что они создают активность и посягают на территорию JavaScript. Это правда, но CSS делает это уже много, много лет.

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

Буквально через год JavaScript сделал эффекты при наведении указателя мыши неизмеримо более просто достижимыми, и каждый разработчик засорил свой код HTML строковыми событиями, такими как onmouseover=»changeColor();» onmouseout=»changeColorBack();».

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

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

Преимущества CSS3

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

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

Что такое переход?

Переход — это самый простой тип анимации CSS3, он определяет эффект, который переключается между двумя состояниями.

Состояния

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

Запуск

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

Пример перехода CSS2.1

Давайте рассмотрим очень простой эффект, который можно создать с помощью CSS2.1:

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

В коде HTML есть блок содержимого и текстовый элемент:


Блоку содержимого задано несколько стилей, и он относительно спозиционирован:

Текстовому элементу задан размер и расположение в левом верхнем углу блока содержимого:

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

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

Пример перехода CSS3

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

Наведите указатель мыши на белый блок, и вы увидите тот же самый переход, но он плавно анимируется между состояниями. Этот эффект бесспорно выглядит гораздо приятней. Вот пример кода CSS3, примененного к селектору #container p и воплощающего анимацию:

И это все. Всего двадцать пять знаков. Обратите внимание, можно передвинуть указатель мыши с блока во время анимации, и все плавно вернется на место. Сколько времени займет программирование подобного эффекта на JavaScript?

Правда, мы добавили хитрое свойство transform: rotate(360deg); состоянию при наведении указателя мыши, что можно увидеть в браузерах Firefox и Internet Explorer версии 10 и выше.

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

Переходы без приставок производителей поддерживаются в браузерах Firefox, Internet Explorer версии 10 и выше и Opera версии 12.

Для браузеров на движке Webkit, таких как Chrome, Safari и Opera версий 15 и выше, требуется приставка -webkit-, которую нужно добавить к стандартному свойству, например:

К сожалению, не все браузеры созданы равными. Анимации могут выглядеть странновато в браузере Opera версии 12. К тому же движок Webkit не переносит трансформацию вращения, а также пасует на некоторых других эффектах переходов, поэтому мы не используем свойство -webkit-transform: rotate(360deg);. И, наконец, браузер Internet Explorer версии 9 и ниже вообще не сможет воспроизвести анимацию.

Хотя это не так уж и важно. Если переходы CSS3 не работают вообще или работают, но не как задумано, начальное и конечное состояния будут достигнуты в любом случае. В большинстве случаев браузер просто откатится на переключение между состояниями как в CSS2.1.

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

CSS3 — анимация

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

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

Чтобы воспользоваться анимацией в своём проекте, вам достаточно сделать две вещи:

  1. Создать саму анимацию c помощью ключевого слова @keyframes
  2. Подключить её к элементу, который надо анимировать, и указать нужные свойства.

Правило @keyframes

Правило @keyframes позволяет создавать анимацию с помощью ключевых кадров — состояний объекта в определенный момент времени.

Ключевые кадры анимации создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты.

Если не задан начальный ( from , 0%) или конечный ( to , 100%) кадр, браузер установит для них расчётные значения анимируемых свойств такими, какими они были бы если бы не была применена анимация.

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

При определении анимации сразу после свойства @keyframes должно следовать имя данной анимации (данное имя затем должно быть указано в свойстве animation элемента, который будет анимирован).

Мы создали анимацию, которая работает следующим образом:

  1. Начало анимации ( from можно было написать 0%) — положение элемента по оси Х равно 0px;
  2. Середина анимации (50%) — положение элемента по оси Х равно 130px;
  3. Конец анимации ( to мы использовали 100%) — возвращаем элемент на начало анимации, т.е. положение элемента по оси Х равно 0px;

See the Pen ONgOQY by Aleksei (@AmateR) on CodePen.0

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

Ключевые кадры можно группировать:

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

Подключение анимации к элементу происходит двумя командами — animation-name и animation-duration .

Название анимации

Свойство animation-name задает имя анимации. Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно слово или несколько, связанных между собой при помощи пробела — или нижнего подчеркивания _.

Длительность анимации

Свойство устанавливает длительность анимации, например: animation-duration: 1s;. Его можно указывать в секундах (3s, 65s, .4s) или в миллисекундах (300ms, 1000ms). Не наследуется.

Временная функция

Свойство animation-timing-function позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. Обратим внимание, что скорость воспроизведения анимации чаще всего нелинейная, т.е. ее мгновенная скорость в разных участках будет отличаться. На данный момент существует несколько уже встроенных аргументов для этого правила: ease , ease-in , ease-out , ease-in-out , linear , step-start , step-end .

Однако такие функции можно создавать самому. Специальная функция cubic-bezier (P1x, P1y, P2x, P2y); принимает четыре аргумента и строит на их основе кривую распределения значений в процессе анимации. Потренироваться в создании своих функций и посмотреть как они работают можно на этом сайте.

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

  • ease — функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
  • linear — анимация происходит равномерно на протяжении всего времени, без колебаний в скорости; соответствует cubic-bezier(0,0,1,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(x1, y1, x2, y2) — см.выше.
  • inherit — наследует это свойство от родительского элемента.
Мастер Йода рекомендует:  Как очистить кэш DNS (Windows, Mac, Chrome)

See the Pen VaWyjN by Aleksei (@AmateR) on CodePen.0


Анимация с задержкой

Свойство animation-delay определяет задержку до начала воспроизведения анимации, задаётся в секундах или миллисекундах. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Если вы хотите, чтобы анимация началась с середины, задайте отрицательную задержку, равную половине времени, установленном в animation-duration . Не наследуется.

Vavik 96

Интернет дайджест для вебмастеров и фотографов

CSS3 эффекты при наведении с использованием переходов, преобразований и анимации ( Transitions, Transformations, Animations)

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

Vendor – префиксы: Все, что вы должны о них знать!

Прежде чем начать, необходимо получить правильное представление о префиксах: [-webkit- | -moz- | -о- | -ms-], которые часто встречаются на этой странице. Вопрос в том, должны ли вы действительно использовать все из них в каждом конкретном случае. Например, Firefox справляется преобразованиями (transforms) с октября 2012 года без -moz- префикса, но если вы хотите иметь поддержку IE9 , вам необходимо включить в код префикс -ms-. На этой странице включены префиксы только там, где это имеет смысл для текущего и будущего использования. Если вы обеспокоены обратной совместимостью, обратите внимание на эту таблицу и добавляйте только то, что нужно.

Тип Включения Обратная совместимость Для версии Дата выпуска
transform (2d) -webkit- -moz-
-o-
-ms-
FF ease со временем перехода 0,7 секунд. Это сделано для того, чтобы подчеркнуть реальный эффект, а не переходную функцию за ним. Тем не менее, вы можете не только настроить время перехода, но также способ перехода обрабатываемый браузером. Вот некоторые из возможных вариантов с объяснением, что это на самом деле:

  • ease : анимация начинается быстро, но значительно замедляется в конце.
  • ease-in-out : анимация начинается и заканчивается медленно.
  • ease-in : анимация начинается очень медленно и достигает полной скорости в конце.
  • ease-out : анимация начинается на полной скорости, но постепенно замедляется.
  • linear : анимация имеет ту же скорость от начала до конца (без замедления).

Скорее всего, это все, что вам когда-нибудь понадобится. Тем не менее, если вы своего рода перфекционист или просто хотите иметь что-то, сделанное именно так, как вам нравится, вы можете использовать свой ​​собственный анимационный переход, используя cubic-bezier() . Чтобы его использовать, просто замените слово ease в приведенных примерах на что-то вроде cubic-bezier(1,-0.75,0.5,1.2) . Первые и последние два значения не более чем простые контрольные точки, представленных как (x1, y1, x2, y2) на графике функции. Не важно, что, функция начинается (0,0) и заканчивается в точке (1,1). Но с этими двумя контрольными точками, вы можете влиять на путь между (0,0) и (1,1). Поэкспериментируйте с величинами для регулировки функции синхронизации, в зависимости от ваших целей. Например cubic-bezier(0.42,0,1,1) имеет тот же эффект, как и ease-in, то время как cubic-bezier(0,0,0.58,1) имеет тот же эффект, как ease-out .

Тройная АНИМАЦИЯ на CSS | transform — transition | Анимация на CSS

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

ПОДПИСКА на УРОКИ

Анимация на CSS3 transform и transition

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

See the Pen zPmoPR by Denis (@Dwstroy) on CodePen.

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

Описываем каркас блоков в html

Открываем свою среду разработки, в моем случае это phpstorm . В структуре создаем файл index.html . В нем разворачиваю doctype , заполняю заголовок и пробежимся по его коду.

Мета тег viewport , он нам тут не понадобится его удаляем. Затем идет подключение bootstrapcdn для иконок font awesom , его оставляем. Тут будем использовать одну иконку из их каталога, вы сможете выбрать любую и установить ее на странице.

Далее подключение библиотеки bootstrap , она нам не нужно, ее удаляю.

Подключение файла style.css оставляем, а media.css и скрипты с jquery удалю, они нам тут не понадобятся.

В структуре создаю новую директорию CSS , в ней файл стилей style.css . Создадим еще одну директорию под названием img , в нее перемещаю заранее подготовленную картинку размер ее 430×450 пик.

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

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

В контейнере imgBox , расположим дополнительный блок с названием textBox , в нем разместим три текстовых элемента, заголовок h4 , span и p — краткое описание. В принципе тут все довольно просто и давайте это реализуем.

Делаем основной контейнер .imgBox , вкладываем в него ссылку, a в ссылку вкладываем картинку. Иконку вставим позже, сам код иконки скопируем с сайта и вставим в структуру отдельно. При помощи ^ выходим из вложенного блока, создаем новый блок с названием .textBox , в нем размещаем три элемента, в параграфе генерируем произвольный текст из семи слов.


Кто не в курсе, что я тут написал, посмотрите мой урок по Emmet, там вам все станет предельно ясно. Нажимаю кнопку TAB и перед нами готовая структура. Заполню ее атрибуты и содержание тегов.

Перейдем на сайт fontawesome.ru , отберем иконку link , скопируем ее код, и вставим вовнутрь ссылки перед тегом img .

Дополнительный атрибут aria-hidden можно удалить, так как в данном примере он нам не нужен. Мы получили фактически готовую структуру, с которой в дальнейшем будем работать.

Теперь переходим в CSS и приступим к стилилизации данных элементов.

Описываем в CSS стили ImgBox

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

Начинаем с основного родителя всех элементов, это блок с классом .imgBox . Так как планируется текстовые блоки и ссылку размещать внутри родителя, это можно сделать различными вариантами, я использую позиционирование и для этого задаю блоку с классом .imgBox position: relative , соответственно далее внутреннему блоку присвоить position: absolute .

Элементы оформляю по порядку их DOM структуры , и в данном случае идет ссылка. На данный момент она занимает половину области блока, для того чтобы она покрывала всю область, отбираем ее .imgBox a и делаем блочным элементом.

На данный момент видим, вся область заполнилась. Перейдем к следующему элементу i оформим его и с позиционируем. Отбираем иконку .imgBox a i , позиционируем ее абсолютно родителя position: absolute , увеличим до 30 пик., задаем белый цвет.

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

Так же временно скрою блок с текстовым содержанием, что бы он нам не мешал.

Оформляем иконку

Теперь ее довольно хорошо видно, и первая задача, выравниваем иконку посередине блока. Для этого ей задам произвольную обводку outline: 1pxsolid orange чтобы видеть ее границы блока. Задаем все отступы в 0. Получили блок с иконкой на ширину основного блока.

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

Затем иконку центруем посередине ее блока, задаем text-align: center и по высоте центрируем при помощи line-height: 60px .

Для анимирования переходов элемента задам transition: all 0.5s . префиксы удалю для компактности кода, но вы на боевых проектов их лучше оставьте.

Сама иконка по наведению должна выезжать с переднего плана, для этого нам ее нужно зафиксировать в начальном положении в увеличенном виде. Задействуем transform со значением scale(3) , удалю обводку outline , нам больше она не понадобится.

Зададим backgroung белого цвета с прозрачностью в 0.3, добавим тень box-shadow , префиксы удалю, вы соответственно их можете оставить. Со всех сторон делаю по 8 пик., цвет ставлю в rgba , делаю потемнее основной обводки, и прозрачность установлю в 0.3. Затем при помощи border-radius в 100% закругляю углы.

Так как это кадр начальной анимации, мы его скрываем при помощи opacity: 0 .

Соответственно чуть ниже отображаем ее при помощи псевдокласса :hover , отбираем блок по наведению и устанавливаем opacity: 1 , а transform: scale в 3.

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

Оформляем изображение img

Убираю у блока с классом . imgBox черный фон, и отобразим картинку. Далее зададим ей размеры ширины и высоты по 100%.

И увеличим картинку при помощи трансформации на 1.2 единица.

Что бы она не выходила за пределы блока, добавим overflow: hidden для .imgBox .

Для плавности перехода зададим картинке transition: 0.5s .

Псевдоэлемент ::before для затемнения

При помощи псевдоэлемента ::before , сделаем эффект плавного затемнения.

Создаем у блока .imgBox псевдоэлемент, позиционируем его абсолютно родителю, прописываем content , задаем черный цвет в режиме rgba с прозрачностью в 0.4. Ширину и высоту делаем по 100%.

Так как картинка сейчас на переднем плане добавляем z-index:1 . Для плавности добавляем transition .

И тут перед нами стоит задача сделать анимацию в виде раздвижных створок. Для этого добавляем left: 50% , ширину ставим в 0, и добавим transition в пол секунды для плавной анимации. В тоже время по наведению устанавливаем ширину в 100% и left в 0.

Для того что бы появилась иконка добавим ей z-index:2 .

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

Оформляем блоки с текстом

Отображаем блок, позиционируем абсолютно родителя, от низу блок подымим его на 5%, текст сделаем белым цветом, зададим черный задний фон в rgba с прозрачностью 0.3. Центруем текст посередине text-align: center . При изменение масштаба блока, видим, что блок с текстов занимает не всю ширину, для этого задаем ему width: 100% . Сделаем текст заглавными буквами text-transform: uppercase , и так как этот блок будем перемещать, добавляем плавность transition в пол секунды.

Затем оформим текст, для заголовка H4 текст увеличим до 20 пик, сделаем жирным, и верхний нижний отступ сделаем по 6 пик.

Для тега span делаем border верхний нижний по 1 пик. и увеличим внутренние отступы с верху и снизу на 2 пик.

Параграфу сделаем нормальным шрифтом, увеличим его до 15 пик, и зададим отступы.

Последним штрихом задаем анимацию, при наведении нужно убрать данный блок, для этого использует transform по оси Y на 150%.

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

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

В следующем уроке продолжим работу, по данной анимации в CSS и уже сделаем адаптивную структура блоков при помощи Grid .

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

CSS-анимация с помощью свойства transition

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


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

Большинство браузеров на данный момент поддерживают свойство CSS3 transition , о чем можно получить справку на сайте caniuse.com. Исключение составляют Internet Explorer 6-9 и все версии Opera Mini. Пользователи этих браузеров, к сожалению, не увидят созданной вами анимации.

hover-эффекты с помощью свойства transition

Чаще всего свойство transition применяется для создания hover-эффектов, или эффектов при наведении курсора мыши. Его суть заключается в том, что оно просчитывает изменения между свойствами, заданными для обычного состояния элемента и при наведении на него курсора мыши, которое задается с помощью псевдокласса :hover. Это позволяет создавать различные красивости от плавного изменения цвета текста и фона на кнопках-ссылках до наплывающих блоков и сменяющихся картинок. Очень интересные эффекты можно получить, если использовать псевдоэлементы ::before и/или ::after.

Составляющие свойства transition

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

Из кода видно, что вы можете использовать 4 свойства. Рассмотрим эти css-свойства по отдельности:

Свойство transition-property

Возможные значения transition-property :

Свойство transition-property задает название css-свойства для анимации перехода. Поскольку нужно просчитать разницу между начальным и конечным значением свойства, то и само свойство должно быть рассчитываемым. Например, можно изменить border-width с 1px до 6px, но нельзя преобразовать border-style из solid в dashed . Также можно уменьшить прозрачность элемента с помощью свойства opacity от значения 1 до 0, но невозможно анимировать переход от свойства visibility: visible к свойству visibility: hidden или от display: block к display: none . Для этого лучше воспользоваться методами show() или hide() библиотеки jQuery. Перечень доступных для анимации свойств можно найти в документации MDN.

Ниже показан код, который меняет цвет фона у div с с салатного на желтый за 0.8 секунды.

Сам пример вживую:

Наведите на блок ниже

В свойстве transition-property можно указать несколько значений через запятую или использовать значение all (все свойства), которое является значением по умолчанию. Также свойство transition-property имеет значение none (ни одно из свойств), которое обычно применяют для отмены анимации, например на мобильных устройствах.

Рассмотрим пример, в котором нужно анимировать несколько свойств:

Обратите внимание, что для div-а с свойство border-radius изначально не было задано, оно получило значение в 8px только при наведении (псевдокласс :hover ), тем не менее скругление углов тоже было анимированным, т.к. его включили в свойство transition-property, а его начальное значение (0) было взято из значений по умолчанию для border-radius .

Наведите на блок ниже

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

Наведите на блок ниже

Свойство transition-duration

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

Свойство transition-duration измеряется либо в секундах ( 1s, 1.5s, 0.8s, .5s ) или в миллисекундах ( 1000ms, 1500ms, 800ms, 500ms ) . По умолчанию это свойство имеет значение 0, т.е. время на анимацию фактически нет, поэтому, если вы забудете указать это значение, то переход свойств не произойдет.

Код примера для исследования свойства transition-duration таков:

Пример с разной длительностью анимации:

Наведите на блок ниже

Свойство transition-duration

Использование только свойства transition-duration при hover-эффекте:

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

Используем transition-duration

Свойство transition-timing-function

В соответствии с переводом это свойство задаёт временную функцию, которая описывает способ расчета скорости перехода свойств(а) html-элемента от одного значения к другому. По умолчанию свойство имеет значение ease , т.е. анимация происходит с некоторым замедлением.

Варианты свойства transition-timing-function :

На примере ниже вы можете видеть действие большинства из этих вариантов. Можно заметить, что английское слово ease , которое присутствует в 4-х значениях свойства, отвечает за замедление движения, причем с добавкой in — в начале движения, с out — в конце, а с in-out — и в начале и в конце. График функции можно посмотреть в том же примере при наведении на любой блок.

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

На первом графике показан линейный переход ( linear ) — анимация происходит равномерно, без задержек в начале или в конце. Второй график отображает функцию ease-in — анимация происходит с замедлением в начале, т.к. именно в начале перехода за продолжительное время (2 клетки на графике) изменение свойства происходит очень незначительно (полклетки). Третий график отвечает за функцию ease-out — анимация с замедлением в конце. Для него характерно небольшое изменение значения анимируемого свойства за продолжительное время именно к концу анимации, т.е. ситуация и сам график противоположны функции ease-in .

Вариант cubic-bezier — это возможность управлять 2-мя точками графика с помощью маркеров для изменения точек на кривой Безье, которые чаще всего используются дизайнерами при создании векторных форм в таких программах, как Adobe Illustrator или Inkscape. Вам необязательно владеть этими программами, чтобы управлять графиком функции. Вполне достаточно знать, как использовать Инспектор свойств браузера (клавиши F12 или Ctrl + Shift + I ). Скриншоты сделаны в браузере Chrome.

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

Потяните за точку в начале или в конце графика и задайте другой вариант управления скоростью анимации transition :

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

Аналогичным образом можно управлять графиками функций в свойстве transition-timing-function с помощью текстового редактора Brackets. Для того чтобы выполнить редактирование, поставьте курсор в любом месте значения для свойства transition-timing-function и нажмите Ctrl + E .

В Brackets вы также можете воспользоваться перетягиванием одного или обоих маркеров курсором мыши или смещать его после выделения клавишами-стрелками. При изменении значения вы так же, как и в случае с Инспектором свойств, получаете функцию вида cubic-bezier :

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

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

Свойство transition-timing-function

Example 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aliquam molestiae vitae possimus, nesciunt aliquid quaerat sint illum? Vel libero ducimus quidem nesciunt.

Example 2


Aspernatur assumenda culpa totam eligendi asperiores, nesciunt enim dignissimos ab perspiciatis, nisi saepe. Error et veniam natus magnam delectus nostrum corporis maiores!

Example 3

Architecto asperiores modi cum aliquid labore, quasi impedit quis velit similique adipisci sunt molestiae soluta at nam eligendi ad dignissimos temporibus.

CSS-анимации

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

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

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

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

CSS transitions

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

Например, CSS, представленный ниже, 3 секунды анимирует свойство background-color .

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

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

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

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

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

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

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

transition-property

Список свойств, которые будут анимироваться, например: left , margin-left , height , color .

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

transition-duration

Продолжительность анимации, задаётся в формате CSS time, то есть в секундах s или ms .

transition-delay

Задержка до анимации. Например, если transition-delay: 1s , то анимация начнётся через 1 секунду после смены свойства.

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

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

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

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

Можно стартовать её «с середины», с нужной цифры, например соответствующей текущей секунде, при помощи отрицательного transition-delay .

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

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

transition-timing-function

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

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

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

Кривая Безье

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

  1. Начальная точка (0,0) .
  2. Конечная точка (1,1) .
  3. Для промежуточных точек значения x должны быть в интервале 0..1 , y – любыми.

Синтаксис для задания кривой Безье в CSS: cubic-bezier(x2, y2, x3, y3) . В нём указываются координаты только двух точек: второй и третьей, так как первая и последняя фиксированы.

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

  • По оси x идёт время: 0 – начальный момент, 1 – конец времени transition-duration .
  • По оси y – завершённость процесса: 0 – начальное значение анимируемого свойства, 1 – конечное.

Самый простой вариант – это когда процесс развивается равномерно, «линейно» по времени. Это можно задать кривой Безье cubic-bezier(0, 0, 1, 1) .

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

…Как видно, это просто прямая. По мере того, как проходит время x , завершённость анимации y равномерно приближается от 0 к 1 .

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

Мастер Йода рекомендует:  XHTML CSS. Преимущества очевидны
Добавить комментарий