Вы, наверное, заметили, что в последнее время на сайтах и в приложениях появляется множество примеров анимации CSS . Анимация уже давно стала основной тенденцией и не показывает никаких признаков того, что она куда-то пойдет. Повсюду в Интернете дизайнеры проявляют творческий подход и используют CSS-анимацию, чтобы привнести индивидуальность на свои сайты, без труда запечатлеть сложные идеи и тонко направить действия своих пользователей.
Золотое правило здесь заключается в том, что ваши CSS-анимации не должны не быть раздутым — даже небольшое движение может оказать большое влияние, и слишком много может отвлекать и раздражать пользователей. Лучшие анимации, которые вы видите в Интернете, по-прежнему берут свое начало в классических 12 принципах анимации Диснея.
В этой статье мы собрали подборку лучших примеров CSS-анимации с веб-сайтов по всему миру и углубились в код, чтобы показать вам, как достичь этих эффектов самостоятельно. Читайте подробные учебные пособия и вдохновляющие эффекты (и ссылки на их код), чтобы вы могли исследовать себя, или перейдите на страницу 3, где приведены основные советы о том, когда и как использовать анимацию CSS.
Что такое CSS-анимация?
CSS-анимация — это метод анимации определенных элементов HTML без необходимости использования ресурсоемкого и требовательного к памяти JavaScript или Flash. Нет ограничений на количество или частоту свойств CSS, которые могут быть изменены. CSS-анимации инициируются путем указания ключевых кадров для анимации: эти ключевые кадры содержат стили, которые будет иметь элемент.
Содержание статьи
01. Blowing bubbles
CSS-анимация пузырей, которая присутствует в 7UP, является прекрасным примером реализации темы бренда в дизайне сайта. Анимация состоит из нескольких элементов: «рисование» пузырьков в SVG и две анимации, примененные к каждому пузырьку.
Первая анимация изменяет непрозрачность пузырька и перемещает его вертикально в окне просмотра; вторая создает эффект колебания для дополнительного реализма. Смещения обрабатываются путем нацеливания на каждый пузырь и применения различной длительности анимации и задержки.
Для создания наших пузырей мы будем использовать SVG. В нашем SVG мы создаем два слоя пузырьков: один для больших пузырьков и один для маленьких пузырьков. Внутри SVG мы размещаем все наши пузыри внизу поля просмотра.
... ... ...
Для применения двух Отдельные анимации для наших SVG, использующие свойство transform, нам нужно применить анимацию к отдельным элементам. Элемент
CSS имеет мощный движок анимации и действительно простой код для создания сложных анимаций. Мы начнем с перемещения пузырьков вверх по экрану и изменения их непрозрачности, чтобы они постепенно исчезали в начале и в конце анимации.
@keyframes up {0% {opacity: 0; } 10%, 90% {непрозрачность: 1; } 100% {непрозрачность: 0; transform: translateY (-1024px); }}
Чтобы создать эффект колебания, нам просто нужно переместить (или перевести) пузырь влево и вправо на нужную величину — слишком много, чтобы анимация выглядела слишком резкой и отключен, пока слишком мало останется в основном незамеченным. Эксперименты являются ключевыми при работе с анимацией.
@keyframes wobble {33% {transform: translateX (-50px); } 66% {transform: translateX (50px); }}
Чтобы применить анимацию к нашим пузырям, мы будем использовать группы, которые мы использовали ранее, и помощь nth-типа для идентификации каждого пузыря группа индивидуально. Мы начнем с применения значения непрозрачности для пузырьков и свойства will-change чтобы использовать аппаратное ускорение.
.bubbles-large> g {opacity: 0; will-change: transform, opacity;} .bubbles-large g: nth-of-type (1) {...} ... .bubbles-small g: nth-of-type (10) {...}
Мы хотим, чтобы все моменты анимации и задержки находились в пределах пары секунд друг от друга и задавали их бесконечное повторение. Наконец, мы применяем функцию синхронизации easy-in-out к нашей анимации колебания, чтобы она выглядела немного более естественной.
.bubbles-large g: nth-of- type (1) {animation: до 6,5 с бесконечно; } .bubbles-large g: nth-of-type (1) circle {animation: колебание 3s бесконечное замедление; } ... bubbles-small g: nth-of-type (9) circle {animation: колебание 3 с 275 мс бесконечное время простоя; } .bubbles-small g: nth-of-type (10) {анимация: до 6 с 900 мс бесконечно;}
Тонкая анимация мыши с прокруткой может дать направление пользователю, когда они впервые попадают на веб-сайт. Хотя это может быть достигнуто с помощью элементов и свойств HTML, мы собираемся использовать SVG, поскольку это больше подходит для рисования.
Внутри нашего SVG нам нужен прямоугольник с закругленными углами и круг для элемента, который мы используем ». Мы собираемся анимировать, используя SVG, мы можем масштабировать иконку до любого нужного размера.
Теперь мы создали SVG, нам нужно применить несколько простых стилей, чтобы контролировать размер и положение значка в нашем контейнере. Мы обернули ссылку вокруг мыши SVG и расположили ее в нижней части экрана.
.scroll-link {position: absolute; внизу: 1рем; слева: 50%; transform: translateX (-50%); } .mouse {max-width: 2.5rem; ширина: 100%; высота: авто; }
Далее мы создадим нашу анимацию. На 0 и 20% пути нашей анимации мы хотим установить состояние нашего элемента в начале. Если установить его на 20%, он будет оставаться неподвижным в течение некоторого времени, если повторяется бесконечно.
@keyframes scroll {0%, 20% {transform: translateY (0) scaleY (1); }}
Нам нужно добавить начальную точку непрозрачности, а затем трансформировать как позицию Y, так и вертикальную шкалу на отметке 100%, в конце нашей анимации. Последнее, что нам нужно сделать, это сбросить непрозрачность, чтобы исчезнуть наш круг.
@keyframes scroll {... 10% {opacity: 1; } 100% {transform: translateY (36px) scaleY (2); непрозрачность: 0,01; }}
Наконец, мы применяем анимацию к кругу, вместе со свойством transform-origin и свойством will-change чтобы разрешить аппаратное ускорение. Свойства анимации достаточно понятны. Функция синхронизации cubic-bezier используется для того, чтобы сначала оттянуть круг назад, прежде чем опустить его до основания формы мыши; это добавляет игривости в анимацию.
.scroll {animation-name: scroll; продолжительность анимации: 1,5 с; функция синхронизации анимации: кубический Безье (0,650, -0,550, 0,250, 1,500); количество итераций анимации: бесконечно; Transform-origin: 50% 20,5 пикселей; воля-изменение: трансформация; }
03. Анимированное письмо
Нажмите, чтобы увидеть анимацию в действии
На сайте Garden Eight используется общая техника анимации, посредством которой текст кажется выписанным. Чтобы добиться эффекта, обратимся к SVG. Для начала создадим SVG. Здесь есть два подхода: преобразовать текст в пути для их анимации или использовать текст SVG. Оба подхода имеют свои плюсы и минусы.
Начнем с создания анимации ключевых кадров. Единственная функция, которую нам нужно выполнить, это изменить штрих-смещение . Теперь мы создали нашу анимацию, нам нужно применить значения, из которых мы хотим анимировать. Мы установили stroke-dasharray который будет создавать промежутки в штрихе. Мы хотим, чтобы наш штрих был достаточно большим, чтобы охватить весь элемент, и, наконец, сместить штрих на длину штриха.
Волшебство происходит, когда мы применяем нашу анимацию. Анимируя смещение, мы отображаем обводку, создавая эффект рисования. Мы хотим, чтобы элементы рисовали по одному, с некоторым перекрытием между концом рисования одного элемента и началом рисования следующего. Чтобы добиться этого, мы обращаемся к Sass / SCSS и nth-of-type чтобы задержать каждую букву на половину длины анимации, умноженную на позицию этой конкретной буквы.
04. Летящие птицы
Мы начинаем с абсолютно прямых векторных линий, рисуя каждый кадр нашей анимации, изображая птицу в другом состоянии полета. Затем мы манипулируем векторными точками и округляем прямые и ребра. Наконец, мы помещаем каждый кадр в коробку одинакового размера и размещаем их рядом. Экспортируйте файл как SVG.
Настройка HTML действительно проста. Нам просто нужно обернуть каждую птицу в контейнер, чтобы применить несколько анимаций — одну, чтобы птица летала, а другую, чтобы перемещать ее по экрану.
Мы применяем нашу птичью SVG в качестве фона для нашего птичьего div и выбираем размер, которым мы хотим, чтобы каждый кадр был. Мы используем ширину, чтобы приблизительно рассчитать новую фоновую позицию. SVG имеет 10 ячеек, поэтому мы умножаем нашу ширину на 10, а затем слегка меняем число, пока оно не будет выглядеть правильно.
.bird {background-image: url ('bird.svg'); размер фона: авто 100%; ширина: 88 пикселей; высота: 125 пикселей; will-change: background-position; } @keyframes fly-cycle {100% {background-position: -900px 0; }}
У CSS-анимации есть несколько хитростей, о которых вы, возможно, не знаете. Мы можем использовать функцию анимации-синхронизации чтобы показывать изображение поэтапно — очень похоже на пролистывание страниц в записной книжке, чтобы сослаться на анимацию.
animation-name: fly- цикл; функция синхронизации анимации: шаги (10); количество итераций анимации: бесконечно; продолжительность анимации: 1 с; задержка анимации: -0,5 с;
Теперь мы создали цикл полетов, наша птица в настоящее время машет крыльями, но никуда не денется. Чтобы переместить ее по экрану, мы создаем еще одну ключевую анимацию. Эта анимация будет перемещать птицу по экрану по горизонтали, а также изменять вертикальное положение и масштаб, чтобы птица могла более реалистично перемещаться по ней.
После того, как мы создали наши анимации, нам просто нужно применить их. Мы можем создать несколько копий нашей птицы и применять различное время анимации и задержки.
.bird - one {длительность анимации: 1 с; задержка анимации: -0,5 с; } .bird - two {animation-duration: 0.9s; задержка анимации: -0,75 с; }
05. Крест мой гамбургер
Эта анимация используется во всем Интернете, превращая три линии в значок креста или закрытия. До недавнего времени большинство реализаций было достигнуто с использованием элементов HTML, но на самом деле SVG гораздо больше подходит для такого рода анимации — больше нет необходимости раздувать код кнопок с несколькими интервалами.
Из-за анимируемой природы и SVG и его навигации DOM, код для выполнения анимации или перехода изменяется очень мало — техника та же.
Мы начинаем с создания четырех элементов, независимо от того, охватывает ли он элемент div или пути внутри SVG. Если мы используем интервалы, нам нужно использовать CSS, чтобы расположить их внутри div; если мы используем SVG, об этом уже позаботятся. Мы хотим расположить линии 2 и 3 в центре — одна поверх другой — равномерно располагая линии 1 и 4 выше и ниже, следя за тем, чтобы центрировать начало преобразования.
Мы будем полагаться на переходя два свойства: непрозрачность и вращение. Прежде всего, мы хотим потушить строки 1 и 4, на которые мы можем ориентироваться, используя селектор : nth-child .
.menu-icon.is-active { тип элемента}: nth-child (1), .menu-icon.is-active {тип-элемента}: nth-child (4) {непрозрачность: 0; }
Осталось только нацелиться на две средние линии и повернуть их на 45 градусов в противоположных направлениях.
.menu-icon.is-active {element -type}: nth-child (2) {transform: rotate (45deg); } .menu-icon.is-active {тип-элемента}: nth-child (3) {transform: rotate (-45deg); }
06. Погоня за кругами
Анимированная иконка загрузки состоит из четырех кругов. Круги не заполнены, но имеют чередующиеся цвета обводки.
В нашем CSS мы можем установить некоторые основные свойства для всех наших кругов и затем использовать : nth-of селектор типа для применения различных штрих-черточки к каждому кругу.
окружность: nth-of-type (1) {штрих-черта: 550; } круг: nth-of-type (2) {штрих-черта: 500; } круг: nth-of-type (3) {штрих-черта: 450;} круг: n-й тип (4) {штрих-черта: 300; }
Далее нам нужно создать анимацию ключевых кадров. Наша анимация очень проста: все, что нам нужно сделать, это повернуть круг на 360 градусов. Поместив наше преобразование на отметке 50% анимации, круг также вернется в исходное положение.
@keyframes preloader {50% {transform: rotate (360deg); }}
Теперь, когда наша анимация создана, нам просто нужно применить ее к нашим кругам. Мы устанавливаем имя анимации; продолжительность; Счетчик итераций и функция синхронизации. «Легкость в выходе» придаст анимации более игривый вид.
animation-name: preloader; продолжительность анимации: 3 с; количество итераций анимации: бесконечно; анимация-функция времени: легкость-в-выход;
На данный момент у нас есть наш загрузчик, но все элементы вращаются вместе в одно и то же время. Чтобы исправить это, мы будем применять некоторые задержки. Мы создадим наши задержки, используя цикл Sass for.
@for $ i от 1 до 4 {&: nth-of-type (# {$ i}) {animation-delay: # {$ i * 0,15} с; }}
Из-за задержек наш круг поочередно анимирует, создавая иллюзию кругов, преследующих друг друга. Единственная проблема в том, что при первой загрузке страницы круги становятся статичными, затем они начинают двигаться, по одному за раз. Мы можем добиться того же эффекта смещения, но остановить нежелательную паузу в нашей анимации, просто установив задержки в отрицательное значение.
animation-delay: - # {$ i * 0.15} s;
07. Ретро-кликабельный аккордеон
Бельгийский дизайнер интерфейсов и трикстер CSS Бенджамин де Кок показывает нам, как использовать возможности CSS3 для создания анимированных, автоматически центрируемых по клику аккордеон.
Я буду использовать какой-то мертвый простой HTML5-код для этого аккордеона. По сути, каждый раздел аккордеона является элементом section (имеет смысл, не так ли?) И содержит заголовок и абзац.
Введение
Lorem ipsum dolor sit amet ...
Общая информация
Lorem ipsum dolor sit amet ...
Свяжитесь с нами
Lorem ipsum dolor sit amet ...
Идея состоит в том, чтобы заключить заголовки разделов в якоря, которые ссылаются на себя. Поскольку: target позволяет нам выбрать целевой элемент, нам также будет разрешено выбрать элемент, следующий за ним, с помощью соседнего селектора. Давайте попробуем это. Вот измененная разметка HTML:
Введение
Lorem ipsum dolor sit amet ...
Общая информация
Lorem ipsum dolor sit amet ...
Свяжитесь с нами
Lorem ipsum dolor sit amet ...
А вот невероятно простой CSS для получения самого первого поведения переключения:
p {display: none; }: target + p {display: block; }
Я начну с центрирования аккордеона как по горизонтали, так и по вертикали. Модель flexbox — это идеальный метод позиционирования для такого рода эффекта, поскольку он позволяет отображать элемент всегда в центре блока (здесь: страница) без указания какого-либо измерения. Я буду использовать стандартные нотации для этого урока, но не забывайте использовать префиксы вендора в вашем конечном коде.
* {margin: 0; обивка: 0; } html, body {height: 100%; } body {display: box; коробчатый ориентируют: вертикальный; коробка-пакет: центр; коробка-Align: центр; / * Для Firefox * / ширина: 100%; } div {width: 250px; }
По центру, но визуально все еще довольно ужасно. Добавление CSS сексуальности:
body {font: .7em / 1.5 "lucida grande", arial, без засечек; фон: # f3faff; } div {background: #fff; пограничный радиус: 5px; box-shadow: 0 1px 3px rgba (0,0,0, .3); } h1 {font-size: 1em; } {display: block; высота: 23px; высота строки: 23px; фон: линейный градиент (#eee, #ccc); цвет: # 333; текст-отделка: нет; выравнивания текста: центр; тень текста: 0 1px 0 rgba (255,255,255, .5); Граница внизу: 1px solid #aaa; } #intro {border-radius: 2px 2px 0 0; } #contact {border-radius: 0 0 3px 3px; } a: hover, a: focus {opacity: .9; } a: active {фон: линейный градиент (#ccc, #ddd); цвет: # 000; }
Woot! Это выглядит одновременно функционально и сексуально. Что касается моих требований, я почти там. Просто не хватает анимационной части на самом деле. Плохая новость: добавить эти переходы не так просто.
Основная проблема в том, что вы, очевидно, не можете выполнять переходы для свойства, такого как display, поэтому вам придется использовать числовые значения. Поэтому вместо того, чтобы скрывать и показывать разделы с отображением, я буду использовать свойство height для переключения с 0 на высоту содержимого.
Вторая плохая новость: в настоящее время вы не можете выполнить переход между числовым значением и "авто". Это означает, что мне придется указать высоту для каждого раздела вручную. Насколько я могу судить, W3C знает об этом, и они согласны, что это должно быть возможно. Я надеюсь, что производители браузеров это реализуют: это было бы очень полезно. Вот окончательный код:
* {margin: 0; обивка: 0; } html, body {height: 100%; } body {display: box; коробчатый ориентируют: вертикальный; коробка-пакет: центр; коробка-Align: центр; шрифт: .7em / 1.5 "lucida grande", ариал, без засечек; фон: # f3faff; / * Для Firefox * / ширина: 100%; } div {width: 250px; фон: #fff; пограничный радиус: 5px; box-shadow: 0 1px 3px rgba (0,0,0, .3); } p {высота: 0; отступы: 0 15px; переполнение: скрытый; переход: высота .4s разгрузка, отступы .4s разгрузка; } h1 {font-size: 1em; } {display: block; высота: 23px; высота строки: 23px; фон: линейный градиент (#eee, #ccc); цвет: # 333; текст-отделка: нет; выравнивания текста: центр; тень текста: 0 1px 0 rgba (255,255,255, .5); Граница внизу: 1px solid #aaa; } #intro {border-radius: 2px 2px 0 0; } #contact {border-radius: 0 0 3px 3px; } a: hover, a: focus {opacity: .9; } a: active {фон: линейный градиент (#ccc, #ddd); цвет: # 000; }: target + p {padding: 10px 15px; border-bottom: 1px solid #ccc; } #intro: target + p {height: 70px; } #info: target + p {height: 230px; } #contact: target {border-radius: 0; } #contact: target + p {height: 180px; }
Следующая страница: Дополнительные примеры CSS-анимации для изучения
Загрузка...
