Как сделать мерцающую анимацию

Оцените материал
(0 голосов)

Проблема

Помните старый тег  <blink> ? Разумеется, помните. Он превратился в культурный символ нашей индустрии, напоминающий нам о неловком, непритязательном начале нашей дисциплины, а также в семейную шутку корифеев веб-дизайна. Он презираем всюду и всеми за нарушение правила о разделении структуры и стиля, но в первую очередь за чрезмерное использование в конце девяностых, из-за чего работа в Сети в то время была сущим кошмаром. Даже его создатель Лу Монтулли признался: «[Я считаю] мерцающий тег худшим, что я когда-либо сделал для Интернета».

Однако теперь, когда раны, нанесенные тегом  <blink> , затянулись, мы иногда ловим себя на мысли о добавлении в дизайн мерцающей анимации. Поначалу это кажется чем-то странным, словно мы обнаруживаем в себе жуткие наклонности, о которых до этого не подозревали. Но кризис самопознания проходит, когда мы осознаем, что в некоторых редких сценариях мерцание может улучшить впечатление пользователя от использования вашего дизайна, а не ухудшить его. Распространенный прием в дизайне пользовательских интерфейсов — добавление мерцания (но не более трех вспышек!) для указания, что определенное изменение было применено к интерфейсу, или же для подсветки цели текущей ссылки (элемента, чей идентификатор совпадает с указанным в адресе после решетки  # ). При таком ограниченном использовании мерцание может быть очень эффективным инструментом привлечения внимания пользователя к определенной области экрана, а благодаря малому количеству итераций мы избегаем побочных эффектов, которые порождал тег  <blink> . Еще один трюк, позволяющий использовать мерцание во благо (для управления вниманием
пользователя) и при этом не наносить ущерб (не отвлекать, не раздражать и не вызывать припадков), заключается в том, чтобы «сглаживать» вспышки (то есть вместо простого переключения между состояниями «включено» и «выключено» мы добавляем плавный переход от одного к другому).

Но как же реализовать все это? Единственная подходящая замена тегу  <blink> в CSS, свойство  text-decoration: blink , слишком ограниченно и не позволяет воплощать все задумки, но даже если бы оно обладало достаточной мощью, все равно поддержка браузерами у него находится на очень низком уровне. Так можем ли мы использовать CSS или наша единственная надежда — JS?

Решение

В действительности реализовать подобное мерцание с помощью анимации CSS можно несколькими способами: анимировать весь элемент (свойство  opacity ), анимировать цвет текста (свойство  color ), анимировать его рамку (свойство  border-color ) и т. д. Далее в этом разделе мы будем предполагать, что в нашем решении должен мерцать только текст, так как это самый распространенный сценарий использования. Для других составляющих элемента решение будет аналогичным. Добиться плавного мерцания довольно просто. Наша первая попытка могла бы выглядеть так:

@keyframes blink-smooth { to { color: transparent } }
.highlight { animation: 1s blink-smooth 3; }

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

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

@keyframes blink-smooth { 50% { color: transparent } }
.highlight {
animation: 1s blink-smooth 3;
}


Кажется, мы достигли желаемого результата. Однако даже если это не заметно на данной конкретной анимации (потому что на переходах цвета/прозрачности различия между функциями расчета времени не так видны), важно помнить, что анимация ускоряется как при пропадании, так и при наборе цвета, что в определенных сценариях (например, когда мы создаем пульсирующую анимацию) выглядит неестественно. Для того случая у нас в рукаве припасен еще один козырь:  animation-direction. Единственное предназначение  animation-direction — менять направление анимации либо во всех итерациях ( reverse ), либо в каждой четной итерации ( alternate ), либо в каждой нечетной итерации ( alternate-reverse ). Лучше всего здесь то, что при этом функция расчета времени также меняется на обратную, создавая гораздо более реалистичную анимацию. Попробуем применить это к нашему мерцающему элементу:

@keyframes blink-smooth { to { color: transparent } }
.highlight {
animation: .5s blink-smooth 6 alternate;
}

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

Если мы добивались плавной мерцающей анимации, то дело сделано. Но что, если нам требуется классическое решение? Как быть? Первая попытка может выглядеть примерно так:
@keyframes blink { to { color: transparent } }
.highlight {
animation: 1s blink 3 steps(1);
}

Однако попытка выполнить этот код ведет к полнейшему провалу: абсолютно ничего не происходит. Причина в том, что  steps(1) по сути — это эквивалент  steps(1, end) , что означает, что переход между текущим цветом и цветом  transparent происходит за один шаг, а значение переключается в конце. Следовательно, мы видим начальное значение на протяжении всей анимации, за исключением бесконечно короткого промежутка в самом конце. Если мы поменяем функцию расчета времени на  steps(1, start) , то произойдет ровно противоположное: переключаться цвет будет в начале, поэтому мы будем видеть только прозрачный текст безо всякой анимации или мерцания.


На следующем шаге логично испробовать  steps(2) в обоих вариантах (с ключевыми словами  start и  end ). Теперь мы видим какое-то мерцание, но оно происходит между полупрозрачным и прозрачным текстом или полупрозрачным текстом и текстом обычного цвета — соответственно по той же причине. К сожалению, поскольку невозможно настроить  steps() так, чтобы переключение происходило в середине — только в начале или в конце, — единственным решением здесь будет скорректировать ключевые кадры анимации, переместив точку переключения на 50%, как мы уже делали раньше:

@keyframes blink { 50% { color: transparent } }
.highlight {
animation: 1s blink 3 steps(1); /* или step-end */
}

Наконец-то все заработало! Кто бы мог подумать, что классическое прерывистое мерцание будет реализовать сложнее, чем современное плавное? CSS никогда не перестает удивлять…

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/blink

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

Прочитано 290 раз
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+