Лучшие примеры CSS анимации для воссоздания

Что такое CC анимация?
01. Тамблинг надписи
02. мыльные пузыри
04. Анимированное письмо
05. Летящие птицы
06. Крест мой гамбургер
07. Погоня за кругами

Вы, наверное, заметили, что в последнее время на сайтах и в приложениях появляется множество примеров CSS-анимации. Анимация уже давно стала основной тенденцией и не показывает никаких признаков того, что она куда-то движется, как видно из этих потрясающих анимированные музыкальные клипы ,

Хотя это может показаться ограниченным, когда дело доходит до анимации, CSS на самом деле является действительно мощным инструментом и способен создавать красиво плавные анимации с частотой 60 кадров в секунду. Повсюду в Интернете дизайнеры становятся креативными и используют CSS-анимацию, чтобы привнести индивидуальность на свои сайты, без труда запечатлеть сложные идеи и тонко направить действия своих пользователей.

Золотое правило заключается в том, что ваши CSS-анимации не должны быть раздуты - даже небольшое движение может оказать большое влияние, а слишком многое может отвлекать и раздражать пользователей. Лучшие анимации, которые вы видите в Интернете, по-прежнему берут свое начало в диснеевской 12 принципов анимации ,

В этой статье мы собрали подборку лучших примеров CSS-анимации с веб-сайтов по всему миру и погрузились в код, чтобы показать вам, как достичь этих эффектов самостоятельно. Читайте подробные руководства и вдохновляющие эффекты (и ссылки на их код), чтобы вы могли исследовать себя, или перейти на страницу 3 для некоторых главных советов, когда и как использовать анимацию CSS.

Что такое CC анимация?

CSS-анимация - это метод анимации определенных HTML-элементов без использования процессора и памяти или JavaScript или Flash. Там нет ограничений на количество или частоту свойств CSS, которые могут быть изменены. CSS-анимации инициируются путем указания ключевых кадров для анимации: эти ключевые кадры содержат стили, которые будет иметь элемент.

01. Тамблинг надписи

«Игра года» от Google содержит игривую CSS-анимацию на главной странице, где заглавные слова натыкаются друг на друга. Вот как это было сделано.

Первый шаг - определить документ веб-страницы с помощью HTML. Он состоит из контейнера документа HTML, в котором хранится раздел заголовка и тела. В то время как заголовочный раздел используется для загрузки внешних ресурсов CSS и JavaScript, тело используется для хранения содержимого страницы.

<! DOCTYPE html> <html> <head> <title> Отключить анимацию текста Kilter </ title> <link rel = "stylesheet" type = "text / css" href = "styles.css" /> <script src = " code.js "> </ script> </ head> <body> <h1 class =" animate backwards "> Анимированный заголовок </ h1> <h1 class =" animate forwards "> Анимированный заголовок </ h1> <h1 class = "animate mixed"> Анимированный заголовок </ h1> </ body> </ html>

Содержимое страницы состоит из трех тегов заголовка h1, которые будут отображать различные варианты эффекта анимации. Хотя любой текст может быть вставлен в эти теги, его анимация определяется именами в атрибуте класса. Настройки представления и анимации для этих имен классов будут определены в CSS позже.

Затем создайте новый файл с именем ' code.js '. Мы хотим найти все элементы страницы с помощью класса animate и создать список массивов, представляющий каждое слово внутреннего текста. Начальная задержка анимации также определяется на этом этапе. Содержимое страницы недоступно до полной загрузки страницы, поэтому этот код помещается в прослушиватель событий загрузки окна.

Содержимое слова элементов анимации должно содержаться внутри элемента span . Для этого существующее содержимое HTML сбрасывается на пустое, а затем используется цикл, чтобы сделать слово в указанном списке «слов» элементом span. Кроме того, применяется стиль animationDelay - рассчитывается относительно начальной задержки (указанной ниже) и позиции индекса слова.

Создайте новый файл с именем styles.css . Теперь мы установим правила представления, которые будут частью каждого элемента слова в анимации, контролируемой их тегом span. Отображение в виде блока в сочетании с выравниванием по центру текста приведет к тому, что каждое слово появится на отдельной строке, горизонтально выровненной по центру его контейнера. Относительное позиционирование будет использоваться для анимации относительно позиции текстового потока .

.animate span {display: block; положение: относительное; выравнивание текста: по центру; }

К элементам анимации, имеющим класс «назад» и «вперед», применяется специальная анимация. Этот шаг определяет анимацию, применяемую к элементам span, родительский контейнер которых имеет класс animate и backwards или forward .

Обратите внимание, что между animate и обратной ссылкой на класс нет пробела, то есть родительский элемент должен иметь и то, и другое.

.animate.backwards> span {animation: animateBackwards 1s замедление вперед; } .animate.forwards> span {animation: animateForwards 1s замедление вперед; }

Смешанная анимация определяется с использованием тех же настроек, которые используются для прямой и обратной анимации. Вместо того, чтобы применять анимацию к каждому дочернему элементу родителя, селектор nth-child используется для применения чередующихся настроек анимации. Анимация в обратном направлении применяется ко всем дочерним элементам с четным числом, а анимация в прямом направлении применяется к каждому дочернему элементу с нечетным числом.

.animate.mixed> span: nth-child (even) {animation: animateBackwards 1s замедление вперед; } .animate.mixed> span: nth-child (odd) {animation: animateForwards 1s замедление вперед; }

Анимации, которые мы только что создали, сделаны с начальной исходной позиции « из », без вертикальной позиции или регулировки поворота. Позиция « to » - это конечное состояние анимации, которое устанавливает элементы с отрегулированной вертикальной позицией и состоянием поворота. Несколько разные конечные настройки используются для обеих анимаций, чтобы текст не читался из-за наложения в смешанных анимациях.

@keyframes animateForwards {от {top: 0; преобразование: вращение (0 градусов); } на {top: .9em; преобразование: вращение (-15 градусов); }} @keyframes animateBackwards {from {top: 0; преобразование: вращение (0 градусов); } to {top: 1em; преобразование: вращение (25 градусов); }}

02. мыльные пузыри

CSS-анимация пузырей, которая присутствует в 7UP, является прекрасным примером реализации темы бренда в дизайне сайта. Анимация состоит из нескольких элементов: SVG «рисование» пузырьков, а затем две анимации, примененные к каждому пузырьку.

Первая анимация изменяет непрозрачность пузыря и перемещает его вертикально в окне просмотра; вторая создает эффект колебания для дополнительного реализма. Смещения обрабатываются путем нацеливания на каждый пузырь и применения различной длительности анимации и задержки.

Для создания наших пузырей мы будем использовать SVG , В нашем SVG мы создаем два слоя пузырьков: один для больших пузырьков и один для маленьких пузырьков. Внутри SVG мы размещаем все наши пузыри внизу поля просмотра.

Чтобы применить две отдельные анимации к нашим SVG, которые используют свойство transform, нам нужно применить анимацию к отдельным элементам. Элемент <g> в SVG можно использовать так же, как div в HTML; нам нужно обернуть каждый из наших пузырей (которые уже находятся в группе) в групповой тег.

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-of-type для индивидуальной идентификации каждой группы пузырьков. Мы начнем с применения значения непрозрачности для пузырьков и свойства 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) {анимация: до 6,5 с бесконечно; } .bubbles-large g: nth-of-type (1) circle {animation: колебание 3s бесконечное облегчение-выход; } ... bubbles-small g: nth-of-type (9) circle {animation: колебание 3s 275ms бесконечное время простоя; } .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 {... 10% {непрозрачность: 1; } 100% {transform: translateY (36px) scaleY (2); непрозрачность: 0,01; }}

Наконец, мы применяем анимацию к кругу вместе со свойством transform-origin и свойство will-change, чтобы разрешить аппаратное ускорение. Свойства анимации довольно очевидны. Функция синхронизации кубического Безье используется для того, чтобы сначала оттянуть круг назад, а затем опустить его до нижней части формы мыши; это добавляет игривый вид анимации.

.scroll {animation-name: scroll; продолжительность анимации: 1,5 с; функция синхронизации анимации: кубический Безье (0,650, -0,550, 0,250, 1,500); количество итераций анимации: бесконечно; Transform-origin: 50% 20,5 пикселей; воля-изменение: трансформация; }

04. Анимированное письмо

Нажмите, чтобы увидеть анимацию в действии

Веб-сайт Garden Eight использует общую технику анимации, при которой текст кажется выписанным. Чтобы добиться эффекта, обратимся к SVG. Для начала мы создадим SVG. Здесь есть два подхода: преобразовать текст в пути для их анимации или использовать текст SVG. Оба подхода имеют свои плюсы и минусы.

Начните с создания нашей ключевой анимации. Единственная функция, которую нам нужно выполнить, - это изменение смещения штрихов . Теперь мы создали нашу анимацию, нам нужно применить значения, из которых мы хотим анимировать. Мы устанавливаем штрих-черточку , которая будет создавать промежутки в штрихе . Мы хотим, чтобы наш штрих был достаточно большим, чтобы охватить весь элемент, и, наконец, сместить черту на длину штриха.

Волшебство происходит, когда мы применяем нашу анимацию. Анимируя смещение, мы отображаем обводку, создавая эффект рисования. Мы хотим, чтобы элементы рисовали по одному, с некоторым перекрытием между концом рисования одного элемента и началом рисования следующего. Для достижения этого мы обращаемся к пререкаться / SCSS и nth-of-type для задержки каждой буквы на половину длины анимации, умноженной на позицию этой конкретной буквы.

05. Летящие птицы

Мы начинаем с абсолютно прямых векторных линий, рисуя каждый кадр нашей анимации, изображая птицу в другом состоянии полета. Затем мы манипулируем векторными точками и округляем прямые и ребра. Наконец, мы помещаем каждый кадр в коробку одинакового размера и размещаем их рядом. Экспортируйте файл как 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-анимации есть несколько хитростей, о которых вы можете не знать. Мы можем использовать функцию анимации-времени, чтобы показывать изображение поэтапно - очень похоже на пролистывание страниц в блокноте, чтобы сослаться на анимацию.

название анимации: цикл мухи; функция синхронизации анимации: шаги (10); количество итераций анимации: бесконечно; продолжительность анимации: 1 с; задержка анимации: -0,5 с;

Теперь мы создали наш цикл мух, наша птица в настоящее время хлопает крыльями, но никуда не денется. Чтобы переместить ее по экрану, мы создаем еще одну ключевую анимацию. Эта анимация будет перемещать птицу по экрану по горизонтали, а также изменять вертикальное положение и масштаб, чтобы птица могла более реалистично перемещаться по экрану.

После того, как мы создали наши анимации, нам просто нужно применить их. Мы можем создать несколько копий нашей птицы и применять разное время анимации и задержки.

.bird - one {animation-duration: 1s; задержка анимации: -0,5 с; } .bird - two {animation-duration: 0.9s; задержка анимации: -0,75 с; }

06. Крест мой гамбургер

Эта анимация используется во всем Интернете, превращая три линии в значок креста или закрытия. До недавнего времени большинство реализаций было достигнуто с использованием элементов HTML, но на самом деле SVG гораздо больше подходит для такого рода анимации - больше нет необходимости раздувать код кнопок с несколькими интервалами.

Из-за анимируемой природы и SVG и его навигации DOM, код для выполнения анимации или перехода изменяется очень мало - техника та же.

Мы начнем с создания четырех элементов, будь то внутри элемента div или путей внутри SVG. Если мы используем span, нам нужно использовать 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); }

07. Погоня за кругами

Анимированный значок загрузки состоит из четырех кругов. Круги не имеют заливки, но имеют чередующиеся цвета обводки.

В нашем CSS мы можем установить некоторые базовые свойства для всех наших кругов, а затем использовать селектор : nth-of-type , чтобы применить разные штрих-штрихи к каждому кругу.

окружность: 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: предзагрузчик; продолжительность анимации: 3 с; количество итераций анимации: бесконечно; анимация-функция времени: легкость в выходе;

На данный момент у нас есть наш загрузчик, но все элементы вращаются вместе одновременно. Чтобы это исправить, мы применим некоторые задержки. Мы создадим наши задержки, используя цикл Sass for.

@for $ i от 1 до 4 {&: nth-of-type (# {$ i}) {задержка анимации: # {$ i * 0.15} с; }}

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

задержка анимации: - # {$ i * 0.15} с;

Следующая страница: Дополнительные примеры CSS анимации для изучения

Проверьте пропущенные уведомления: «Alexa, что я пропустил?
Проверьте пропущенные уведомления: «Alexa, что я пропустил?», «Alexa, прочитайте мои уведомления» или «Alexa, какие у меня уведомления?» Навигация по уведомлениям: «Alexa, next» или «Alexa, previous». Удалить уведомления: «Alexa, удалить все мои уведомления». Списки дел и покупок Добавьте задачу в список дел: «Алекса, добавьте« перейти в продуктовый магазин »в мой список дел» или «Алекса, мне нужно записаться на прием к врачу». Создайте

Что такое IBM Watson?
Что такое IBM Watson? Watson - это когнитивная система, которая просматривает огромные библиотеки данных, чтобы обнаружить идеи, которые могут помочь пользователям ответить на самые простые вопросы. Уотсон понимает нюансы человеческого языка. Он может вернуть соответствующие ответы в контексте вопроса. Он также становится умнее, учась каждому взаимодействию со своими пользователями и каждой части данных, которые он получает. Уотсон - это не «поисковая система» или глубокое обучение,

В этой статье мы будем отвечать на вопросы, которые возникают у большинства новых пользователей Mac, а именно: что такое будильник Mac?
В этой статье мы будем отвечать на вопросы, которые возникают у большинства новых пользователей Mac, а именно: что такое будильник Mac? Как установить будильник на Mac? Как установить будильник на Mac? Где найти будильник для Mac? Могу ли я установить будильник на моем Mac? Где взять приложение для будильника для Mac? Настройка одноразового оповещения на вашем устройстве Mac Первый вопрос, на который нужно ответить: где найти будильник для Mac? Чтобы установить одноразовое

Что делают эти кибер-злоумышленники, когда получают доступ к вашему компьютеру?
Что делают эти кибер-злоумышленники, когда получают доступ к вашему компьютеру? Дожди пишет : Злоумышленники, которые крадут информацию из компьютерных систем, иногда предпочитают торговать или продавать украденную информацию другим преступникам, чтобы использовать их для кражи личных данных и мошенничества в банках.

Что сложнее?
Что сложнее? Мы знаем, что это вопросы, на которые вы бы хотели получить прямой ответ, но на самом деле это будет зависеть от того, что вы считаете легким или сложным. Я знаю, что это не очень удовлетворительный ответ, поэтому вот несколько рекомендаций: ACT может быть проще для вас, чем SAT, если: Вы действительно быстры в своей работе. Как правило, у вас нет проблем с тем, чтобы не успевать на тестах в школе, и вы

Наверное, все родители сталкивались с проблемой, что же включить ребенку на украинском языке на Ютубе?
Наверное, все родители сталкивались с проблемой, что же включить ребенку на украинском языке на Ютубе? Засилье вездесущего российского контента просто поражает: детские песни, детские сказки, развивающие видео, азбуки, мультфильмы и многое другое - все языком оккупанта.

Чипсет Helio P70 против Snapdragon 660: что отличается?
Чипсет Helio P70 против Snapdragon 660: что отличается? ЧипсетHelio P70Snapdragon 660 Производственный процесс TSMC 12-нм процесс FinFET 14-нм процесс LPP FinFET от процессора Samsung 4x Cortex-A73 @ 2,1 ГГц 4x Cortex-A53 @ 2,0 ГГц 8x процессор Kryo 260 с тактовой частотой до 2,2 ГГц ARM Mali-G72 MP3 с частотой до 900 МГц ОЗУ Qualcomm Adreno 512 ОЗУ 1X LPDDR3 / LPDDR4x 933 МГц, 2X LPDDR4x До 1800 МГц до 8 ГБ (LPDDR44)

Интересно, на что ты смотришь?
Интересно, на что ты смотришь? Источник: 11coffee.co.uk Бьюсь об заклад, ваше внимание автоматически настраивается на видео фон, верно? Почти невозможно игнорировать это, поскольку это движется . С тобой все в порядке - это просто человеческая природа и то, как мы подсознательно решаем, на что обратить наше внимание. Мы легко отвлекаемся на все,

Если не миграция, то что?
Если не миграция, то что? Предполагая, что наилучший вариант - переход от XP - не жизнеспособен в краткосрочной перспективе, Лайн говорит, что следующим ограничением является ограничение роли рассматриваемых устройств. «Я бы искал способы изолировать эти устройства и минимизировать риск их заражения в первую очередь или передачи этой инфекции другим», - сказал он. Лайн предлагает сосредоточиться, например, на усилении сетевой безопасности и более агрессивной фильтрации

Что послужило причиной вашего поиска?
Что послужило причиной вашего поиска? С начала этого года вы легко можете ответить на этот вопрос. Используя Инструменты Amazon Ключевое слово из Sistrix вы можете увидеть, какие ключевые слова все еще ищутся для продукта. Подробное руководство по эксплуатации вы можете найти здесь , В принципе, чем лучше вы знаете покупателей

Для больше на восстановлении, проверьте что делать, если вы забыли свой пароль iPhone Забыли пароль iPhone или iPad?
Интересно, на что ты смотришь? Источник: 11coffee.co.uk Бьюсь об заклад, ваше внимание автоматически настраивается на видео фон, верно? Почти невозможно игнорировать это, поскольку это движется . С тобой все в порядке - это просто человеческая природа и то, как мы подсознательно решаем, на что обратить наше внимание. Мы легко отвлекаемся на все,

Что такое CC анимация?
Что такое CC анимация?
Так как же вам ориентироваться в мире онлайн-велнеса, не поддаваясь ажиотажу?
Наверное, все родители сталкивались с проблемой, что же включить ребенку на украинском языке на Ютубе?
Что такое слеш?
Тест MediaTek Helio P70 против Qualcomm Snapdragon 660 SoC: какой тест лучше?
Проверьте пропущенные уведомления: «Alexa, что я пропустил?
», «Alexa, прочитайте мои уведомления» или «Alexa, какие у меня уведомления?
Что такое IBM Watson?