Примеры анимации и переходов псевдоэлементов

Примеры анимации и переходов псевдоэлементов

От автора: творческие эксперименты с применением анимации и переходов к псевдоэлементам для создания интересных эффектов.

Сегодня мы собираемся поэкспериментировать с анимацией и переходами применительно к псевдоэлементам (:before и :after) и раскрыть их потенциал. Мы немного поговорим об анимации псевдоэлементов и рассмотрим четыре примера, где применяются специальные техники достижения многих эффектов. Сначала давайте рассмотрим преимущества и недостатки применения к псевдоэлементам анимации и переходов.

скачать исходникидемо

ПРЕИМУЩЕСТВА

Упрощение и оптимизация разметки HTML

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Внесение определенного вклада в дизайн

НЕДОСТАТКИ

Поддержка только современных браузеров типа Firefox, IE10 и, последнее время, Chrome (для информации смотрите обновленную таблицу поддержки)

Пока не работает в мобильных браузерах

Псевдоэлементы нельзя идентифицировать по ID

Псевдоэлементы не появляются в DOM.

Псевдоэлементы нельзя анимировать с помощью JavaScript

Понятно, что недостатков больше, чем преимуществ, но я считаю, что следует подумать о будущем и дать им шанс!

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

Пожалуйста, обратите внимание:

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

В примерах мы в основном будем применять свойство box-shadow и единицы EM.

Очень интересный факт: псевдоэлементы наследуют свойства от своего родительского элемента. В случае с анимацией все изменения действуют на них напрямую. Это будет удобно, если понадобится увеличить до максимума их поддержку. Чтобы узнать об этом еще больше, прочтите Примените переходы CSS к псевдоэлементам прямо сейчас (Use CSS transitions for pseudo-elements right now)Романа Комарова.

Давайте начнем!

ПРИМЕР 1

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

Разметка

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

CSS

Для получения более натуралистичной анимации вот вам две подсказки:

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

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

Еще информация об анимации и определенно забавная статья, стоящая изучения – это Аварийный набор аниматора (The Animator’s Survival Kit) от Ричарда Уильямса (Richard Williams).

Вернемся к нашим баранам. В последнем примере у псевдокласса :before та же ширина, что у его родительского элемента. Чтобы неожиданно не возникла проблема переполнения, мы применим значение “inherit”.

ПРИМЕР 2

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

В этом примере с помощью перехода мы создадим эффект проведения мышью.

Разметка

Здесь есть только контейнер и заголовок, чтобы отделить текст от всего остального.

CSS

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

ПРИМЕР 3

Как мы посмели бы пройти мимо обязательной анимации загрузки! Тут идея заключается в смешении цветов по мере вращения. Это очень просто!

Разметка

Для разметки мы применим один-единственный элемент.

CSS

Это – отличный пример экспериментирования с временными интервалами и скоростями для получения действительно эффектной анимации.

ПРИМЕР 4

А это – самый безумный и экстравагантный пример из всех: маленькое летучее одноглазое существо! Здесь мы применим и анимацию, и переходы.

Разметка

Для глаза существа мы применим один элемент.

CSS

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

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

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

Автор: Marco Barria

Источник: http://tympanus.net/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree