Как сделать движущуюся картинку html
SEO Маяк
Блог Виталия Кириллова | Все о создании,
продвижении сайтов и заработке в интернете
Создание и продвижение сайтов, заработок в интернете
Анимация для сайта. Бегущая строка HTML, тег marquee
Всем привет! Сегодня на seo-mayak.com будет не совсем обычный урок. Речь пойдет об анимации.
Нет, в фотошопе мы разбираться на будем, обойдемся старым добрым HTML и научимся делать несколько анимационных фокусов.
Анимация для сайта забавная штука, скажу я Вам, но почему-то редко применяемая, хотя сложного вообще ничего нет.
Я думаю, что многие веб-мастера просто не знают о существовании специального тега, который приводит в движение текст и оживляет картинки.
Многие вещи можно анимировать без применения фотошопа, средствами обычного HTML, но давайте обо всем по-порядку. Поехали!
Как на сайте сделать бегущую строку с помощью HTML
Давайте заставим строку двигаться. Для этого в редакторе WordPress, в HTML режиме вставляем следующее:
Невероятно, но строчка стала двигаться. Теперь давайте сделаем строчку немного заметнее, добавив стили.
Применив атрибут direction со значением right мы изменим направление движения бегущей строки и она будет двигаться справа налево:
По умолчанию тегу присвоен атрибут direction со значением left, поэтому строчка без применения атрибутов движется слева направо.
Подставив значение up для атрибута direction мы заставим строчку двигаться снизу вверх:
Значение down укажет строчке двигаться сверху вниз
Мне кажется надо увеличить скорость прокрутки бегущей строки, для этого мы используем атрибут scrollamount. В кавычках указываем число от 1. Например:
Анимация происходит за счет постоянного затирания информации и отображения ее на новом месте. С помощью значений для атрибута мы устанавливаем расстояние в пикселях между стертым и новым положением строчки, тем самым влияя на скорость и плавность ее движения.
По молчанию стоит значение 6, но если задать значение 1, то расстояние между старым и новым положением строчки будет равняться 1 пикселю, что обеспечит медленный и плавный ход бегущей строки:
Атрибут behavior задает способ прокрутки внутри заданного блока и по умолчанию имеет значение scroll, что заставляет бегущую строчку скрываться из виду и начинать движение сначала.
Но если подставить значение alternate, то строчка не будет скрываться из виду, а дойдя до границ блока начнет движение в обратную сторону:
Значение slide для атрибута behavior дает команду бегущей строчке дойти до границы блока и остановиться:
Атрибут height задает высоту блока. По умолчанию стоит 12 пикселей, но давайте ее изменим и немного добавим к скорости прокрутки бегущей строки:
Атрибут width отвечает за ширину блока. Можно применять атрибуты width и height вместе, чтобы задать желаемые границы блока. Для наглядности добавим рамку в стили и чуть-чуть замедлим скорость прокрутки:
Теперь давайте зададим фон для бегущей строки. Для этого применим атрибут bgcolor и поставим для него желтый цвет фона:
Теперь попробуем сделать так, чтобы бегущая строка двигалась в разные стороны.
Устанавливаем время задержки анимации с помощью атрибута scrolldelay, подставляя числовые значения. По умолчанию стоит 80 миллисекунд:
Атрибут scrolldelay — это еще один инструмент, с помощью которого мы можем регулировать скорость прокрутки.
Анимация изображений на сайте
Простой пример анимации изображения:
Конечно сама картинка анимирована в фотошопе, но мы ее заставили перемещаться по странице, создавая эффект движения.
Вот еще интересный пример, с помощью тега marquee можно создать простенький слайдер:
Можно каждую картинку в слайдере сделать ссылкой:
C уважением, Виталий Кириллов
Принципы анимации для веба
Примечание переводчика: Представленный ниже материал содержит значительное количество технических терминов, при переводе которых могут возникнуть неточности. Если вы заметили опечатку, ошибку или неточность перевода — напишите нам, и мы оперативно всё исправим.
Кроме того, в продолжение темы сегодняшней публикации на одну неделю будет открыт продвинутый курс академии по CSS-анимациям, который обычно доступен по подписке. Его описание размещено в конце топика.
Фронтенд-дизайнеры и разработчики используют CSS для создания стилей, позиционирования элементов — в общем, для того, чтобы сайты выглядели красиво. Часто CSS применяют и для добавления движений на веб-страницы, хотя дело обычно не идёт дальше плавных переходов или анимации.
На самом деле анимация может быть мощным инструментом, который позволяет посетителям сайта и клиентам легче взаимодействовать с интерфейсом продукта и быстрее добиваться своих целей. Этого можно достичь, если следовать в своей работе некоторым основополагающим принципам.
Компания Disney занимается анимацией уже много лет и выработала такие рекомендации — ещё в 1981 была опубликована книга «Иллюзия жизни: Анимация Disney» («The Illusion of Life: Disney Animation»), в которой перечислялись 12 принципов анимации (про них писали на Хабре). Они описывают то, как использовать анимацию для создания у зрителей, смотрящих на экран, ощущения реального мира.
В сегодняшней статьей мы рассмотрим каждый из двенадцати этих принципов и обсудим их возможное применение при создании веб-страниц. Все исходники CSS и HTML можно скачать на Codepen.
Сплющивание и растяжение
В мире существует понятие «массы тела» — и когда объект движется, его масса остаётся неизменной. Когда мяч ударится о землю, он станет немного шире и сплющится, потому что во время физического контакта масса объекта перераспределяется.
Этот эффект наиболее полезен при создании физических объектов (например, люди, часы или подпрыгивающие мячи).
Конечно, в случае веб-страниц это свойство можно и проигнорировать — DOM-элементы не обязательно ассоциируются с физическими объектами и могут как угодно расти и уменьшаться в размерах на экране. К примеру, кнопка может увеличиться и трансформироваться в информационное окно, а сообщения об ошибках появляются и исчезают.
Несмотря на это, технику «сплющивания и расширения» можно использовать для создания ощущения наличия у элемента на странице физической массы. Даже небольшие изменения могут создать тонкий, но привлекающий взгляд эффект.
Ожидание
Движения не происходят внезапно. В обычной жизни любому действию предшествует некая подготовка, будь то замедляющийся перед падением со ступенек мяч или человек, сгибающий колени перед прыжком.
Этот эффект можно использовать для того, чтобы сделать движения объектов на веб-странице более реалистичными. Само ожидание может быть реализовано, к примеру, в качестве лёгкого покачивания, которое позволяет пользователям понять, что происходит и помогает им легче следить за перемещениями объекта по экрану.
Фокусировка
Этот эффект заключается в определении объекта в качестве фокуса сцены, в то время как остальные объекты освобождают место для главного действия. Для создания такого эффекта нужный объект соответствующим образом выдвигают на передний план или маскируют сопутствующие элементы, чтобы сфокусировать взгляд пользователя на том, что он должен увидеть.
В терминах веба это означает использование полупрозрачного затемнения для определённого контента. Наложение более тёмного слоя на существующую страницу и последующее размещение контента на переднем плане фокусирует на нём всё внимание пользователей.
Другой подход заключается в использовании движений. Когда на странице одновременно движутся несколько объектов, довольно трудно понять, на какой из них действительно стоит смотреть. Если в такой ситуации остановить все объекты, кроме одного «нужного», то все внимание автоматически будет приковано к нему.
Движение можно использовать и по-другому. Например, если пользователь работает с каким-нибудь документом, то небольшое подрагивание и мигание кнопки «Сохранить» может побудить человека нажать на неё. Когда на экране нет никакой активности, даже небольшое движение очень выделяется.
Движения «полный вперёд» и «пошаговое изменение»
Прямое движение характеризуется полной отрисовкой всех кадров анимации. В свою очередь, пошаговое изменение характеризуется созданием последовательности ключевых кадров, интервалы между которыми заполняются позднее, обычно с помощью вспомогательных средств.
Второй подход используется в большинстве веб-анимации: переходы между главными кадрами реализуются браузером, который интерполирует разницу между каждым из них и дорисовывает столько промежуточных кадров, сколько потребуется для того, чтобы сделать итоговую анимацию плавной.
Исключением является функция «Steps». При её использовании браузер «шагает» по заданному числу дискретных кадров. Таким способом можно создать последовательность изображений, а затем проиграть их в браузере по одному с помощью стиля «Straight Ahead Action».
Следование и захлёстывание
Не всегда действия происходят одновременно. Когда движущийся автомобиль резко тормозит, то с дымом покрышек «клюёт носом», а водитель внутри продолжает двигаться, пока не произойдёт окончательная остановка.
Этот эффект достигается с помощью движений следования и захлёстывания — они нужны, чтобы просигнализировать о том, что объект остановился. К примеру, элемент, помещенный в список может немного проехать нужное положение, а затем вернуться на правильную позицию.
Эффект захлёстывания создаётся с помощью придания объектам различного темпа движения. Этот подход используется при переходах в iOS — некоторые кнопки и элементы двигаются с разной скоростью, в результате перемещения становятся более реалистичными, чем они были бы в случае движения с одинаковой скоростью. Комбинирование движений даёт пользователю время на то, чтобы осознать происходящие изменения.
В вебе это обычно достигается комбинированием плавных переходов или CSS-анимацией с разной скоростью проигрывания.
Плавное ускорение и замедление
Объекты редко переходят мгновенно от состояния покоя сразу к максимальной скорости. Обычно на то, чтобы разогнаться им требуется какое-то время — так же, как и для того, чтобы остановиться. Без постепенного ускорения и замедления движения выглядят неестественно.
В терминологии CSS ускорение и замедление известно как easing или «функция плавности», которая описывает изменение скорости анимации.
Используя функции плавности можно создавать ускоряющиеся и замедляющиеся анимации и даже более сложные эффекты (с помощью функции cubic-bezier ).
Замедление и ускорение делает объекты более реалистичными, но есть и ещё один момент: в жизни они редко двигаются по прямой, как правило движение идёт по изогнутой дуге.
Добиться такого движения по дуге с помощью CSS можно парой разных способов. Один заключается в совмещении нескольких анимаций. К примеру, анимация подпрыгивающего мяча может быть сделана с помощью движений объекта вверх и вниз, и второе движение совмещено с передвижением ещё и вправо. Таким образом получится, что мячик скачет по экрану.
Второй способ — поворот элемента. С помощью изменения центра вращения и выноса его за пределы изначального объекта также можно сформировать дугу.
Второстепенное действие
Основное действие, происходящее на экране, можно подчеркнуть «второстепенной» анимацией. Это может быть движение рук человека при ходьбе или подрагивание его головы при каждом шаге. Или поднимающаяся с земли пыль при каждом ударе мяча.
В случае веб-сайтов вторичные элементы могут «разъезжаться», чтобы выделить то, на что пользователю действительно нужно обратить внимание (пример использования — перетягивание элемента для вставки в середину списка).
Время выполнения
С помощью манипуляции с длительностью анимации можно сделать так, чтобы крупные объекты казались тяжёлыми, а небольшие — лёгкими.
С помощью изменения длительности анимации можно выделить её среди контента веб-страницы или во время взаимодействия с пользователем.
Преувеличение
Этот приём часто используется для привлечения внимания к определённым действиям и придании им большей драматичности в мультфильмах. Волк, который пытается кого-то укусить открывает рот гораздо шире, чем обычно — так гораздо страшнее и внушительнее.
На веб-странице объекты можно увеличивать и уменьшать, чтобы выделить их и привлечь внимание пользователя. Например, при заполнении формы активное поле имеет смысл сделать больше, а неактивные в данный момент, наоборот, уменьшить.
Объём
При работе с объёмными объектами необходимо учитывать правила перспективы — люди живут в трёхмерном мире, поэтому если что-то выглядит не так, как они ожидают, это кажется неправильным.
В современных браузерах есть хорошая поддержка трёхмерных трансформаций. Это значит, что разработчик может создать анимацию, которая будет поворачивать объекты и перемещать их по экрану, а уже сам браузер создаст плавные переходы между состояниями.
Привлекательность
В мире искусства внимание к деталям может создавать особую атмосферу — возникающую, например, при взгляде на картину. Точно также и в мире веба качественные и хорошо подобранные анимации позволяют сайту выглядеть более привлекательно и авторитетно. Больших успехов в подобной работе добилась, к примеру, команда сервиса Stripe.
Заключение
Использование принципов, описанных выше позволит веб-разработчикам создавать более качественные и приятно выглядящие анимации. Если анимация учитывает физический вес объекта, выделяет изменения, в ней используются вторичные движения, а ее время исполнения скрупулёзно рассчитано — то это значительно улучшит общее впечатление пользователей от страницы.
А теперь про курс по анимации
Как мы уже сказали в начале статьи, в продолжении темы публикации мы окрываем для бесплатного доступа один из продвинутых курсов HTML Academy, который посвящён анимации.
В курсе «Анимация» рассматриваются основы анимации на CSS. Вы будете двигать, поворачивать и видоизменять объекты, попутно осваивая приёмы работы анимации в CSS.
Все задания разработаны в рамках одной сюжетной линии (легенды), согласно которой вы можете помочь человечеству пройти путь развития цивилизации вплоть до полётов в космос.
Прокачиваем свои CSS-анимации
В процессе изучения CSS-анимаций мы обычно разбираем синтаксис, говорим что-то про keyframes, про transition, про связанные с ними свойства, про то, как их активировать при наведении мыши или с помощью навешивания классов. И часто на этом все и заканчивается. И вот, сделав пару меняющих цвет кнопок или выезжающих уведомлений, люди считают, что они знают про CSS-анимации все. Но так ли это?
Разумеется, нет. Главные сложности начинаются тогда, когда речь заходит о чем-то более хитром, нежели изменение цвета или прозрачности у элемента, тогда, когда мы сталкиваемся с дизайнером с широкими взглядами, который придумыват всякие разные штуки, не особенно заботясь о том, как их потом верстать. И вот тут многие фронтендеры начинают спотыкаться. Мои наблюдения показывают, что разработчикам, причем не только начинающим, не хватает широты взглядов, не хватает каких-то дерзких идей, ломающих привычный порядок элементов на странице, чтобы реализовать что-то более-менее сложное. И мне кажется, что нужно с этим что-то сделать. В связи с этим мы сегодня посмотрим на некоторые примеры CSS-анимаций с CodePen, которые могут стать триггерами, заставляющими задуматься о широте возможностей простых казалось бы инструментов, и дадим сами себе несколько советов по поводу того, что стоит попробовать сделать при изучении этого класса анимаций. Надеюсь кому-то это поможет взглянуть на CSS-анимации под новым углом и немного прокачать свои навыки их использования.
Поскольку все примеры взяты с CodePen, а туда выкладывают в основном концепты, не прошедшие рефакторинг, код может быть местами странным или избыточным. Чтобы не тратить время на вникание в эти примеры, все важные моменты, о которых мы будем говорить, будут выноситься в виде отдельных вставок кода прямо в статью, а сами примеры здесь будут выполнять скорее роль визуальных иллюстраций.
А начнем мы сразу с провокационного совета:
Анимируйте неанимируемые свойства в keyframes
Вы, конечно, подумали, что это шутка. Все знают, что нет смысла анимировать то, что анимировать нельзя по определению. И в вакууме – да, вы правы. Но на практике бывают моменты, когда мы таки можем поменять какое-то неанимируемое свойство и получить от этого эффект, которого по другому не добиться никак.
На самом деле тут происходит некоторая игра слов – например свойство visibility формально является “анимируемым”, но по факту мы не можем плавно перевести его значение из одного в другое. Так что здесь мы говорим скорее о свойствах, которые “нельзя плавно изменить”.
Поведение неанимируемых свойств в keyframes плохо поддается систематизированию. По идее они должны меняться в конце анимации или в конце фрейма, после которого их поменяли, но на практике в разных браузерах это может происходить по-разному, особенно если мы говорим про IE/Edge, который нет-нет да и встречается в требованиях. Да и у Safari бывают свои тараканы в голове. Видимо светлое будущее еще не наступило. Так что, во избежание встречи с разными редкими багами, воспользуемся небольшой уловкой.
Для того, чтобы точно знать, когда наше значение изменится, нам понадобится ограничить промежуток времени, на котором будет происходить изменение его значения. Так, вне зависимости от поведения браузера, мы получим, что оно поменяется плюс-минус в тот же миг, что и нужно нам.
Для начала небольшой пример, как это вообще возможно. На примере z-index:
Здесь мы прямо посреди анимации создаем два фрейма на расстоянии 1% от анимации и меняем значение неанимируемого свойства. Нам не так важно, как там браузер решит – поменять его в конце, в середине, или даже в начале второго фрейма – при расстоянии в 1% мы никогда не заметим разницу. Останется только найти в анимации момент, когда этот переход не будет бросаться в глаза.
Старайтесь всегда проверять, чтобы такие переходы не бросались в глаза. Это, наверное, главное правило анимирования в CSS – делайте все, что угодно, пока это никто не видит. А чтобы отвлечь внимание – делайте еще больше всего.
В качестве примера возьмем вот такую абстрактную штуку:
Обратите внимание на то, как точки уходят друг под друга по очереди. Без изменения z-index мы бы не смогли получить такой эффект.
Это, разумеется, надуманный эксперимент, но и на более приземленном сайте может возникнуть ситуация, когда нам нужно какое-нибудь уведомление сначала вывести над каким-то элементом, а потом убрать под него, и там такой прием будет очень кстати.
Также этот прием с подменой чего-то между соседними фреймами можно использовать для того, чтобы сгладить трансформацию одного элемента интерфейса в другой – например кнопки, которая трансформируется во всплывающее окно. Кнопка будет сама по себе, окно само по себе, а переход никто и не заметит.
Добавляйте псевдо-хвостики
Возможно вы еще помните детские мультики. Там персонажи во время быстрых движений растягиваются в направлении движения или даже оставляют за собой фантомный след. Персонаж как бы раздваивается или размазывается и это выглядит довольно мило. Подчеркивает движения. Очень советую загуглить “12 принципов анимации” и посмотреть разные примеры, но мы сейчас остановимся на технической реализации такого следа. Как его можно сделать?
На первый взгляд может показаться, что сделать подобное в рамках CSS практически невозможно, особенно если элемент наполнен контентом, имеет фиксированную форму и его нельзя просто так растянуть. Но это лишь отчасти правда. Мы можем использовать псевдоэлементы размером с основной элемент (или немного меньше него) и перемещать их с задержкой относительно основной анимации.
Это может выглядеть как-то так:
Как видите, никакой магии здесь нет. Просто небольшая задержка. Она даст такой эффект, что часть элемента как бы не успевает за основным его объемом и постоянно его догоняет. Это может разбавить и оживить даже простое движение.
Пример с несколькими движущимися кружками:
А если подключить сюда немного SVG и сделать морфинг контуров элемента в зависимости от скорости его движения, то можно такого наворотить… Но это уже совсем другая история, может быть мы вернемся к ней в другой раз. А пока – будет вам еще одна идея для экспериментов.
Используйте комбинации из animation-timing-function
Одна из очень частых стенок в головах у начинающих верстальщиков – это мысль о том, что animation-timing-function существует в единственном экземпляре на всю анимацию. Так вот, это не так.
Мы можем задавать в каждом фрейме в keyframes свою функцию и она будет работать до следующего фрейма, а в следующем – никто не мешает задать еще одну и.т.д. В последнем фрейме, разумеется, уже ничего не указываем – анимация там заканчивается.
Зачем это может быть нужно? В первую очередь для создания всевозможных подпрыгиваний, отпрыгиваний, смены скорости движения в соответствии с физикой, но без прибегания к скриптам. На самом деле пользователь и не заметит, если где-то движения будут не совсем соответствовать физическим законам, особенно если они будут намеренно преувеличенными, мультяшными. Это определенно стоит взять на вооружение.
Чтобы лучше понять, о чем идет речь, посмотрим красивый пример от David Lewis (концепт не адаптивный, лучше открыть на большом экране в новой вкладке):
Небольшое отклонение от формул из физики вполне допустимо в анимациях. Главное – отвлечь внимание, а для этого хорошо подходят наигранные мультяшные движения. Только нужно заранее договариваться об этом с дизайнером.
Копипаста – наш верный друг
Довольно много занятных штук можно сделать, если скопировать элемент и подложить его под себя. Это как создание нового слоя в графическом редакторе и копирование в него каких-то частей из другого слоя.
Да, я знаю, копипастить нехорошо. А абсолютное позиционирование для многих – как чеснок для вампиров, но когда вопрос состоит в том, чтобы реализовать задуманное, пусть и не очень красивым способом, или не реализовать вообще – выбора не остается.
В целом этот прием может выглядеть как-то так:
И эти несколько слоев кладем друг над другом и начинаем анимировать:
Сам по себе прием ничего не дает, но если мы начнем трансформировать эти слои в зависимости от чего-нибудь, становится гораздо интереснее:
Этот же подход можно использовать для создания различных эффектов в духе параллакса, привязанных к скроллу.
Не забывайте о том, что в простых случаях с короткими надписями можно также использовать псевдоэлементы и content:attr(), чтобы не дублировать индексируемый контент в HTML.
Рассинхронизируйте все движения
Очень часто, особенно если речь идет про бесконечные анимации с несколькими элементами, возникает необходимость их оживить, добавить неравномерность в общее движение. Если у вас такая задача возникла, то будет хорошей идеей немного изменить все длительности в анимации. Да, прям вот так, слегка их поменяйте, чтобы они все были разными. Больше ничего делать не нужно. Здесь стоило бы сказать, что длительности всех движений должны быть взаимно простыми числами, но по отношению к числам с плавающей запятой это высказывание будет немного некорректным.
Что это нам даст? Все очень просто – у нас рассинхронизируется вся анимация.
Особенно хорошо это выглядит в примерах, где объекты вращаются по кругу – там они начнут то двигаться вместе, то по отдельности, и это будет выглядеть куда интереснее, чем движение объектов друг за другом.
Этот совет, несмотря на свою простоту и очевидность, почему-то постоянно забывается и приводит к тому, что люди начинают сочинять очень сложные keyframes там, где можно просто рассинхронизировать длительности. Наверное это буквальное следования совету об использовании разных animation-timing-function. Они ведь такие, один раз попробуешь – и все. Вызывают зависимость. Не злоупотребляйте.
Рандомизируйте z-index
Раз уж мы заговорили про рандомизацию, то будет не лишним отметить тот факт, что иногда бывает полезно в какой-то группе элементов задать им всем случайный z-index. Хотя бы в диапазоне (-1, 1). Часто такой прием используется при создании анимаций, где какой-нибудь заголовок заранее делится на отдельные span-элементы, а потом или они анимируются, или что-то анимируется вокруг них.
На чистом CSS это может выглядеть как-то так:
Это выглядит не очень красиво и не очень универсально, так что имеет смысл написать миксин для вашего препроцессора, который подсобит с рандомизацией.
Заняный пример использования этого приема можно посмотреть в популярном примере, который сделала Ana Tudor:
На самом деле бывает полезно рандомизировать и другие CSS-свойства, но именно z-index приводит к самым интересным результатам на мой взгляд. Здесь буквально нарушается порядок элементов на странице, они все оказываются в разных слоях и можно делать разного рода многослойные анимации с отдельными частями слов или отдельными элементами интерфейса. Это свойство открывает действительно широкий простор для творчества.
Используйте “липкие” фильтры
Были времена, когда SVG-фильтры для обычных HTML-элементов были решением так себе – IE/Edge их совсем не поддерживали, а у остальных браузеров поведение могло сильно отличаться, да и производительность, особенно в Firefox, оставляла желать лучшего. Но постепенно дела налаживаются, Edge переходит на новый движок, да и другие браузеры вроде бы начинают вести себя схожим образом. Так что может для продакшена технология еще не готова, но попробовать и поиграться с ней, для того, чтобы расшевелить мозги, очень даже можно.
Применить фильтр несложно:
Главное не забыть про саму SVG картинку с ним:
Вообще SVG-фильтры – это очень широкая тема, достойная отдельной статьи, так что сейчас мы просто воспользуемся одним из них, не вдаваясь в подробности его работы.
Довольно неплохо эффект с этим фильтром смотрится на разных выезжающих кнопках:
Для создания «вау-эффектов» такие фильтры подходят как нельзя лучше. Осталось дождаться нормальной поддержки всеми основными браузерами.
Не забывайте, что для SVG элементов фильтры применять можно, и иногда, если получается заменить HTML элементы на них, то можно получить и красивое, и кроссбраузерное решение. Главное – проверять производительность, большое количество фильтров может очень плохо на нее повлиять.
Рисуйте на CSS
Это один из моих любимых советов, который в последнее время почему-то приходится давать… нет, не стажерам, и даже не джуниорам, а, как это ни странно, людям со многими годами опыта, которые разрабатывают здоровенные SPA, но при этом не умеют верстать. Да, вот так.
В русскоязычном сообществе как-то так повелось (причем уже давно, я не застал начало этого феномена) разделять “верстальщиков” и “фронтендеров”. И считается, что верстальщики – это люди, которые знают HTML и CSS, но совершенно не умеют в JS, а фронтендеры – это люди, которые пишут на JS, но при этом верстку считают занятием недостойным и так и не начинают в ней разбираться. Наверное это работает в каких-то крупных компаниях, где действительно можно организовать такое разделение задач, что каждый занимается чем-то одним, но мне кажется, что у нас профессия все же единая – мы делаем интерфейсы для сайтов, веб-приложений – тут можно по всякому играть словами, но набор навыков должен быть один и тот же у всех. Ну может быть за исключением WebGL, как узконаправленной технологии, которая действительно нужна не везде.
Но что-то мы ушли от темы. Я это все к тому, что у опытных фронтендеров, которые решили заняться CSS-анимациями, обычно все сложности связаны не с анимациями как таковыми, а с версткой, в которую эти анимации нужно интегрировать.
Очень часто бывает так, что написать анимацию легко, а вот чтобы ее интегрировать в страницу, нужно очень хорошо подумать. Так что всегда встраивайте анимации в страницы сразу, не откладывайте это на последний момент.
Для того, чтобы быстро прокачать свое понимание CSS, очень полезно на CSS порисовать. И поанимировать то, что нарисовали, раз уж мы говорим про анимации. Это звучит глупо, несколько лет назад это казалось вообще странной затеей, но, как показала практика – работает. В одной более-менее комплексной CSS-картинке будет такое количество хитрых задачек на верстку, которое вы с обычных лендингов будете собирать неделями. Вариант “просто верстать страницы, пока не научишься” работает не так хорошо, как хотелось бы. Слишком медленный он. А здесь, именно за счет концентрации задач, идет ускорение обучения. Такой экспресс-курс в неочевидные возможности CSS получается. Ну и результат может быть забавным, не без этого.
Экспериментируйте!
При работе с CSS-анимациями важно экспериментировать, делать странные вещи и смотреть, что из этого получится. Очень многие штуки, которые “нельзя сверстать”, на самом деле можно и сверстать, и анимировать, главное – не бояться. Всем, кто только начинает развиваться в эту сторону, рекомендую поиграть хотя бы с приемами, перечисленными в этой статье. Это уже поднимет вас на новый уровень в работе с анимациями.
Если у вас есть свои идеи относительно подходов к CSS-анимациям, каких-то приемов, которые часто используются или могут помочь другим людям взглянуть на анимации под новым углом, то не стесняйтесь добавить их в комментариях и приложить пример с CodePen или JSFiddle. Это всем будет полезно.