Практика разработки веб-ресурсов обусловила две существенные тенденции: скорость и представление о качестве. Первое обязывает разработчика делать свою работу быстро, второе - определяет границы целесообразного.
Посетитель преследует конкретную цель при посещении сайта и ориентируется на общепризнанные представления о том, где что находится и как оно должно работать. Разработчик может делать свою работу как ему это удобно, но если он заинтересован привлечь внимание большего числа посетителей, то не учитывать их мнение нецелесообразно.
Синтаксис и семантика анимации
Вам будет интересно:POST, GET: чем отличаются запросы друг от друга
Свойство CSS animation является простым в применении и позволяет быстро выполнить интересные эффекты. Для того чтобы элементы веб-страницы вели себя современно, как ожидает того посетитель, совершенно необязательно проявлять особую смекалку и проектировать собственные варианты анимации. Все работает по определению, как ожидаемо и востребовано.
В данном примере описаны два элемента. Первый представляет собой полоску-индикатор, которая движется вправо и пропорционально увеличивается в размере. Второй элемент - картинка, которая просто перемещается вправо.
Здесь показаны не все кадры. Свойство CSS animation в данном случае реализовано плавно. Посетитель страницы наблюдает плавное перемещение с увеличением в объеме строки и движение картинки. Используя различные варианты перемещения вместо типа ease-in-out, можно управлять движением. Вариант ease-in-out дает ускорение в начале и торможение в конце, но можно выбрать и другой вариант движения.
Наложение и взаимодействие элементов
Все элементы, которые имеют свойство animation, CSS рассматривает независимо друг от друга и от общего потока страницы. Если элементы наложены друг на друга, то получается совмещение эффектов и в результате новый эффект.
Если в процессе анимации элементы меняют свойство opacity (прозрачность), то за счет законов наложения цветов можно получить весьма оригинальные эффекты всего двумя - тремя элементами.
Рисунок элемента имеет большое значение. В приведенном примере полоска формируется из картинки, в которой две линии разного цвета. При увеличении размера полоски - это пила, при движении пилы - это движущаяся волна. Манипулируя линиями и их наклоном, можно формировать эффекты по общим законам графики.
Изменение времени анимации также приводит к нестандартным решениям. Использование свойства трансформации, например функции вращения элемента, формирует оригинальные изменения. Пример:
Здесь полоска непрерывно меняет свой облик из непрозрачного состояния в прозрачное. Нижняя картинка при этом меняет только форму.
Анимация информации
В CSS: text animation имеет особый смысл. Текст всегда имеет значение и присутствует на веб-странице с конкретной целью. Но текст всегда менее информативен, чем изображение, а занимает много места.
Гарантия, что правильно написанный текст будет адекватно воспринят посетителем значительно более высока, чем надежда на правильное понимание изображения, особенно когда у дизайнера сайта есть собственное представление о формах выражения смысла.
Если раньше, когда CSS animation только пришла в мир верстки, были популярны бегущие строки, мигающие часы, пульсирующие тексты, то в современном сайтостроении считается нормальным принцип: не раздражая посетителя, максимально эффектно представить функциональность веб-ресурса.
В этом контексте любой из приведенных выше примеров удобен для представления текстовой информации, но вариант применения CSS как 3D animation является самым практичным.
Здесь в «нормальном» состоянии текст занимает мало места. Можно выделить главное слово или обозначить смысл. Как только мышка попадает на область текста, он разворачивается из CSS 3D animation в нормальное читабельное состояние.
Вариант экономии места в сочетании с 3D дизайном позволяет компактно размещать информацию. Освободившееся место можно использовать для других или смежных целей. За счет CSS animation нужная информация будет доступна в нужный момент времени.
Потребительский вариант анимации
Заметные успехи в создании качественных веб-ресурсов до сих пор оставляют за пределами рассмотрения один странно поставленный вопрос: почему дизайн сайта - забота разработчика?
Сайт - это не художественное произведение и не результат творческого процесса для целей эстетического характера. Сайт - это прежде всего функциональность, которая, по мнению владельца (разработчика), приведет к нему новых посетителей и даст возможность работать со своими клиентами.
Продать товар, оказать услугу, выполнить ту или иную работу... Посетитель приходит за товарами, услугами и работами. Оформление и анимация - важны, но мнение посетителя все же важнее мнения владельца (разработчика).
Если в обычном магазине покупатель всегда прав, то почему в интернет-магазине он должен делать все так, как придумал разработчик сквозь предложенный вариант оформления? Анимация в контексте CSS - отличный инструмент, но почему бы не пойти несколько дальше: сколько потребителей, столько и вариантов выражения функциональности и дизайна.
Вариант «потребительской анимации» - это когда есть и то, что предложил разработчик, и то, что выбрали предшествующие потребители, и то, что додумал текущий потребитель.