В процессе изучения CSS-анимации мы обычно смотрим на синтаксис, говорим о ключевых кадрах, о переходе, о связанных с ними свойствах, о том, как активировать их при наведении курсора мыши или с помощью классов.
И часто на этом все и заканчивается.
И вот, сделав пару-тройку кнопок, меняющих цвет, или всплывающих уведомлений, люди думают, что знают о CSS-анимации все.
Но так ли это? Конечно же нет. Основные трудности начинаются, когда дело доходит до чего-то более хитрого, чем изменение цвета или прозрачности элемента, когда мы сталкиваемся с непредубежденным дизайнером, который придумывает всякие разные вещи, особо не заботясь о том, как их потом компоновать.
И именно здесь многие фронтенд-разработчики начинают спотыкаться.
Мои наблюдения показывают, что разработчикам, и не только новичкам, не хватает широты взглядов, не хватает смелых идей, нарушающих привычный порядок элементов на странице, чтобы реализовать что-то более или менее сложное.
И мне кажется, что с этим нужно что-то делать.
В связи с этим сегодня мы рассмотрим несколько примеров CSS-анимаций от CodePen, которые могут стать триггерами, заставляющими задуматься о широте возможностей, казалось бы, простых инструментов, а также дадим себе несколько советов, что попробовать при изучении этого класса.
анимаций.
Надеюсь, это поможет кому-то взглянуть на CSS-анимацию под новым углом и немного улучшить свои навыки их использования.
Так как все примеры взяты из CodePen, и там выложены в основном не рефакторинговые концепции, то код может быть местами странным или избыточным.
Чтобы не тратить время на углубление в эти примеры, все важные моменты, о которых мы будем говорить, будут включены в виде отдельных вставок кода непосредственно в статью, а сами примеры здесь будут служить скорее наглядными иллюстрациями.
Начнем сразу с нескольких провокационных советов:
Анимация неанимированных свойств в ключевых кадрах
Вы, конечно, подумали, что это шутка.Всем известно, что нет смысла анимировать то, что анимировать нельзя по определению.
А в вакууме - да, вы правы.
Но на практике бывают случаи, когда мы все же можем изменить какое-то неанимированное свойство и получить от него эффект, которого нельзя добиться другим способом.
На самом деле здесь происходит некоторая игра слов — например, свойство видимости формально «анимировано», но по факту мы не можем плавно передать его значение из одного в другое.
Так что здесь речь больше идет о свойствах, которые «невозможно плавно изменить».
Поведение неанимационных свойств в ключевых кадрах сложно систематизировать.
По идее они должны меняться в конце анимации или в конце кадра, после которого они были изменены, но на практике в разных браузерах это может происходить по-разному, особенно если мы говорим о IE/Edge, что даже не так.
нашел в требованиях.
Да и у Сафари свои тараканы в голове.
Судя по всему, светлое будущее еще не наступило.
Итак, чтобы не столкнуться с различными редкими багами, воспользуемся небольшой хитростью.
Чтобы точно знать, когда изменится наше значение, нам нужно будет ограничить период времени, в течение которого будет меняться его значение.
Итак, независимо от поведения браузера, мы добьемся его изменения в плюс-минус в один и тот же момент, что нам и нужно.
Сначала небольшой пример того, как это вообще возможно.
Использование z-индекса в качестве примера:
Здесь прямо в середине анимации мы создаем два кадра на расстоянии 1% от анимации и меняем значение неанимационного свойства.@keyframes example-animation { 0% { z-index: 1; } 49% { z-index: 1; } 50% { z-index: -1; } 100% { z-index: -1; } }
Нам не так важно, как браузер решит изменить его в конце, в середине или даже в начале второго кадра — при расстоянии в 1% мы никогда не заметим разницы.
Остается только найти в анимации момент, когда этот переход не будет заметен.
Всегда старайтесь сделать так, чтобы такие переходы не были заметны.В качестве примера возьмем вот эту абстрактную вещь: Обратите внимание на то, как точки по очереди заходят друг под друга.Это, наверное, главное правило анимации в CSS — делай что хочешь, лишь бы никто этого не увидел.
А чтобы отвлечь внимание, сделайте еще больше.
Без изменения z-индекса мы не смогли бы добиться такого эффекта.
Это, конечно, надуманный эксперимент, но на более приземленном сайте может возникнуть ситуация, когда нам сначала нужно отобразить какое-то уведомление над каким-то элементом, а потом спрятать его под ним, и там такой прием будет очень кстати.
полезный.
Также этот прием замены чего-либо между соседними кадрами можно использовать для сглаживания трансформации одного элемента интерфейса в другой — например, кнопки, трансформирующейся во всплывающее окно.Кнопка будет сама по себе, окно будет само по себе, и перехода никто не заметит.
Добавить псевдохвосты
Возможно, вы еще помните детские мультики.Там при быстрых движениях персонажи вытягиваются в направлении движения или даже оставляют за собой призрачный след. Персонаж словно разделился на две части или размыт, и выглядит это довольно мило.
Подчеркивает движение.
Я настоятельно советую вам погуглить «12 принципов анимации» и посмотреть различные примеры, но мы сейчас сосредоточимся на технической реализации такого следа.
Как это можно сделать? На первый взгляд может показаться, что сделать это в рамках CSS практически невозможно, особенно если элемент наполнен содержимым, имеет фиксированную форму и его нельзя просто растянуть.
Но это верно лишь отчасти.
Мы можем использовать псевдоэлементы размером с основной элемент (или чуть меньше) и перемещать их с задержкой относительно основной анимации.
Это может выглядеть примерно так: .
example { animation: example-animation 1s linear infinite; } .
example:after {
animation: example-animation 1s linear infinite
animation-delay: 50ms;
}
Как видите, никакого волшебства здесь нет. Просто небольшая задержка.
Это даст такой эффект, что часть элемента как будто не поспевает за своим основным объёмом и постоянно его догоняет. Это может разбить и оживить даже простое движение.
Пример с несколькими движущимися кругами:
А если сюда подключить немного SVG и морфить очертания элемента в зависимости от скорости его движения, то можно сделать что-то вроде этого.Но это совсем другая история, возможно, мы к ней еще раз вернемся .
А пока вот вам еще одна идея для эксперимента.
Используйте комбинации из функции анимации-тайминга.
Одной из очень распространенных проблем в умах начинающих верстальщиков является идея о том, что функция анимации-тайминга существует в единственном экземпляре для всей анимации.
Это неправда.
Мы можем в каждом кадре в ключевых кадрах задать свою функцию и она будет работать до следующего кадра, а в следующем - нам никто не мешает задать еще одну и т.д. В последнем кадре мы, конечно, уже ничего не указываем - на этом анимация заканчивается.
Пример: @keyframes example-animation {
0% {
/* .
.
.
*/ animation-timing-function: ease-in; } 25% { /* .
.
.
*/ animation-timing-function: ease-out; } 50% { /* .
.
.
*/ animation-timing-function: ease-in; } 75% { /* .
.
.
*/ animation-timing-function: ease-out; } 100% { /* .
.
.
*/
}
}
Почему это может быть необходимо? Прежде всего, создать всевозможные подпрыгивания, прыжки, изменение скорости движения в соответствии с физикой, но не прибегая к скриптам.
На самом деле, пользователь даже не заметит, если где-то движения не совсем соответствуют физическим законам, особенно если они намеренно утрированы и мультяшны.
Это определенно стоит принять во внимание.
Чтобы лучше понять, о чем мы говорим, давайте посмотрим на красивый пример от Дэвида Льюиса (концепция не адаптивная, лучше открывать на большом экране в новой вкладке): Оригинал
В анимации вполне допустимо небольшое отклонение от формул физики.Главное – отвлечь внимание, и для этого хорошо подходят имитационные мультяшные движения.
Просто об этом нужно заранее договориться с дизайнером.
Копипаст — наш верный друг
Довольно много интересного можно сделать, если скопировать элемент и поместить его под себя.Это похоже на создание нового слоя в графическом редакторе и копирование в него некоторых частей из другого слоя.
Да, я знаю, копипаст — это нехорошо.
И абсолютное позиционирование для многих — что чеснок для вампиров, но когда стоит вопрос реализовать замысел, пусть и не очень красиво, или не реализовать его вообще, выбора не остается.
В целом эта технология может выглядеть примерно так: <div class='layer -bottom'>content</div>
<div class='layer -middle'>content</div>
<div class='layer -top'>content</div>
И накладываем эти несколько слоев друг на друга и начинаем анимировать: .
layer { position: absolute; top: 0; left: 0; } .
layer.-top { animation: first-animation 1s linear infinite; } .
layer.-bottom {
animation: second-animation 1s linear infinite;
}
Сама техника ничего не делает, но если мы начнем трансформировать эти слои в зависимости от чего-то, то станет гораздо интереснее: Тот же подход можно использовать для создания различных эффектов, подобных параллаксу, привязанных к прокрутке.
Не забывайте, что в простых случаях с короткими заголовками вы также можете использовать псевдоэлементы и content:attr(), чтобы избежать дублирования индексированного содержимого в HTML.
Рассинхронизируйте все свои движения
Очень часто, особенно когда речь идет о бесконечных анимациях с несколькими элементами, возникает необходимость оживить их, добавить неравномерности в общее движение.Если у вас стоит такая задача, то было бы неплохо немного изменить все длительности в анимации.
Да вот так, чуть-чуть их поменяйте, чтобы они все были разные.
Вам больше ничего делать не нужно.
Здесь стоило бы сказать, что длительности всех движений должны быть относительно простыми числами, но по отношению к числам с плавающей запятой это утверждение было бы несколько неверным.
.
example:nth-of-type(1) { animation-duration: 0.9s; } .
example:nth-of-type(2) { animation-duration: 1.0s; } .
example:nth-of-type(3) {
animation-duration: 1.1s;
}
Что это нам даст? Все очень просто — вся наша анимация рассинхронизирована.
Особенно хорошо это смотрится на примерах, где объекты вращаются по кругу — там они начнут двигаться либо вместе, либо по отдельности, и это будет выглядеть гораздо интереснее, чем перемещение объектов друг за другом.Этот совет, несмотря на свою простоту и очевидность, почему-то постоянно забывается и приводит к тому, что люди начинают составлять очень сложные ключевые кадры, где длительность может быть просто рассинхронизирована.
Вероятно, это буквальное следование совету об использовании различных функций синхронизации анимации.
Они такие, один раз попробуешь и все.
Они вызывают привыкание.
Не злоупотребляйте этим.
Рандомизировать z-индекс
Раз уж мы говорим о рандомизации, то не лишним будет отметить тот факт, что иногда бывает полезно в какой-то группе элементов присвоить им всем случайный z-индекс.По крайней мере, в диапазоне (-1, 1).
Этот прием часто используется при создании анимации, где заголовок заранее разбивается на отдельные элементы span, а затем либо они анимируются, либо что-то анимируется вокруг них.
На чистом CSS это может выглядеть примерно так: .
example:nth-of-type(1) { z-index: 1; } .
example:nth-of-type(2) { z-index: 1; } .
example:nth-of-type(3) { z-index: -1; } .
example:nth-of-type(4) { z-index: 1; } .
example:nth-of-type(5) {
z-index: -1;
}
Это выглядит не очень красиво и не очень универсально, поэтому имеет смысл написать примесь для вашего препроцессора, которая поможет с рандомизацией.
Забавный пример этой техники можно найти в популярном примере Аны Тюдор: Оригинал На самом деле полезно рандомизировать другие свойства CSS, но, на мой взгляд, именно z-индекс дает наиболее интересные результаты.
Здесь порядок элементов на странице буквально нарушается, все они попадают в разные слои и можно делать всякие многослойные анимации с отдельными частями слов или отдельными элементами интерфейса.
Это свойство открывает поистине широкий простор для творчества.
Используйте липкие фильтры
Были времена, когда SVG-фильтры для обычных HTML-элементов были так себе решением — IE/Edge вообще их не поддерживал, а в других браузерах поведение могло сильно отличаться, а производительность, особенно в Firefox, оставляла желать лучшего..
Но постепенно дела идут лучше, Edge переходит на новый движок, и другие браузеры, похоже, начинают вести себя аналогичным образом.
Так что, возможно, технология еще не готова к производству, но попробовать поиграть с ней, чтобы размять мозг, вполне возможно.
Применить фильтр легко: .
example {
filter: url('#my-super-gooey-filter');
}
Главное не забывать о самом SVG-изображении: <svg>
<defs>
<filter id='goo'>
<feGaussianBlur in='SourceGraphic' stdDeviation='8' result='blur' />
<feColorMatrix in='blur' mode='matrix' values='1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 18 -7' result='goo' />
<feBlend in='SourceGraphic' in2='goo' />
</filter>
</defs>
</svg>
В общем, SVG-фильтры — это очень широкая тема, достойная отдельной статьи, поэтому сейчас мы просто воспользуемся одним из них, не вдаваясь в подробности того, как он работает. Эффект с этим фильтром выглядит довольно хорошо на разных скользящих кнопках: Такие фильтры идеальны для создания «вау»-эффектов.
Осталось дождаться нормальной поддержки всеми основными браузерами.
Не забывайте, что фильтры можно использовать для SVG-элементов, а иногда, если заменить ими HTML-элементы, можно получить красивое и кроссбраузерное решение.Главное – проверить работоспособность; большое количество фильтров может очень плохо на нем сказаться.
Рисуйте с помощью CSS
Это один из моих любимых советов, который мне почему-то приходится давать в последнее время.нет, не стажерам и даже не юниорам, а, как ни странно, людям с многолетним опытом, разрабатывающим здоровенные СПА, но при этом не умею краситься.
Да это оно.
В русскоязычном сообществе как-то пошло в обычае (и я уже давно не уловил начала этого явления) разделять «верстальщиков» и «фронтендеров».
И считается, что верстальщики — это люди, знающие HTML и CSS, но совершенно некомпетентные в JS, а фронтенд-разработчики — это люди, которые пишут на JS, но при этом считают верстку недостойным занятием и никогда не начинают этим заниматься.
понимать это.
Наверное, это работает в некоторых крупных компаниях, где действительно можно организовать такое разделение задач, чтобы все занимались чем-то одним, но мне кажется, что профессия у нас все-таки одна - делаем интерфейсы для сайтов, веб-приложения - вот вам Каждый может играть словами, но у всех должен быть одинаковый набор навыков.
Ну разве что за исключением WebGL, как узконаправленной технологии, которая действительно не везде нужна.
Но мы как-то отошли от темы.
Все это означает, что у опытных фронтенд-разработчиков, решивших заняться CSS-анимацией, обычно все сложности связаны не с анимацией как таковой, а с макетом, в который эти анимации нужно интегрировать.
Часто бывает, что написать анимацию легко, а вот интеграция ее на страницу требует много размышлений.Поэтому всегда встраивайте анимацию в страницы сразу, не откладывайте это на последнюю минуту.
Чтобы быстро улучшить понимание CSS, очень полезно рисовать в CSS. И анимируйте то, что вы нарисовали, раз уж речь идет об анимации.
Звучит глупо, еще несколько лет назад это казалось странной идеей, но, как показала практика, это работает. В одном более-менее сложном CSS-изображении будет столько хитрых задач по верстке, которые вы будете неделями собирать с обычных лендингов.
Вариант «просто печатайте страницы, пока не освоитесь» работает не так хорошо, как хотелось бы.
Он слишком медленный.
И здесь именно за счет концентрации задач обучение ускоряется.
Это ускоренный курс неочевидных возможностей CSS. Ну и результат может быть забавным, не без этого.
Ээкспериментируйте!
При работе с CSS-анимацией важно экспериментировать, делать странные вещи и смотреть, что получится.Многое из того, что «нельзя спроектировать», на самом деле можно спроектировать и анимировать, главное не бояться.
Всем, кто только начинает развиваться в этом направлении, рекомендую хотя бы поиграться с техниками, перечисленными в этой статье.
Это уже выведет вас на новый уровень работы с анимацией.
Если у вас есть свои идеи по поводу подходов к CSS-анимации, каких-то приемов, которые часто используются или которые могут помочь другим людям взглянуть на анимацию под новым углом, то смело добавляйте их в комментариях и прикрепляйте пример из CodePen или JSFiddle. Это будет полезно всем.
Теги: #Разработка сайтов #CSS #css анимация
-
The Wall Street Journal Выйдет В Интернет
19 Oct, 24 -
Кэггл: Если Мы Не Сможем Идти, Мы Побежим
19 Oct, 24 -
Необычные Моддинги-3
19 Oct, 24 -
Многопользовательский Чат На Bat
19 Oct, 24 -
Новые Проблемы Для Google В Европе
19 Oct, 24
