Эффект css: 8 простых, но полезных CSS-эффектов для вашего сайта

Содержание

Бесплатная подборка из 40 эффектов CSS / Хабр

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

1. Часы CSS3 с jQuery

Эти часы созданы с использованием одного из основных инструментов CSS3 – rotate и с подключением библиотеки JQuery.

2. Аналоговые часы CSS

Более классические, аналоговые часы. Они созданы с помощью webkit transition и свойства transform CSS. А вот для того, чтобы время соответствовало текущему, понадобиться JavaScript.

3. Вращающийся 3D-куб

Вращение и перемещение по сторонам куба будет производиться стандартными клавишами «вверх», «вниз», «влево» и «вправо». Сама 3D-фигура построена с использованием webkit-perspective, -webkit-transform и -webkit-transition.

4. Несколько выдвигающихся 3D-кубов

Здесь представлено уже несколько 3D-кубов, использующих CSS3 и непосредственно свойства transform и transition.

Наведение курсора на куб заставляет его отъехать в сторону, открывая текст, который находиться на другой стороне фигуры.

5. Accordion меню

Эффект «меню-гармошки» на чистом CSS, где клик по каждой из строк открывает дополнительное окно в теле самого списка. Собственная анимация в браузерах на базе WebKit.

6. Параллакс-скроллинг на CSS

Это анимированный автоматический параллакс-скроллинг с использованием CSS переходов на основе WebKit. При наведении на текстовое окно, звезды на фоне начинают плавно двигаться в сторону. Создается эффект полета.

7. Матрица

Культовый фильм «Матрица» — одна из лучших фантастических кинокартин. На примере показано, как воссоздать примерно такую же удивительную анимацию (черный экран с бегущими цифрами) в CSS3.

8. Динамичные Палароиды

В этом примере проводится подробное описание создания анимированных фотографий, основанной на командах CSS3. При клике на изображение, оно увеличивается и выдвигается на передний план.

9. Масштабирование изображений

В этом примере картинки просто увеличиваются при наведении. Незамысловатый, но порой весьма полезный эффект.

10. Эффекты JavaScript на CSS3

В качестве альтернативы JavaScript, в посте предложено семь эффектов на CSS3: различные блоки, которые вращаются, исчезают, выезжают, увеличиваются и т.д.

11. Виртуальные пластинки DJ Hero

В посте рассказывается, как создать крутящиеся пластинки. Скорость вращения можно регулировать прямо на экране.

12. Скользящий винил

Эффект скольжения виниловых пластинок создается с помощью переходов CSS3 и HTML. Подобная анимация оживляет веб-страницу, добавляет оригинальности стандартной обложке альбома и т.д.

13. Эффекты при наведении на картинку

При наведении курсора на изображение, оно может сместиться в сторону, завертеться, уменьшиться, из квадратного преобразоваться в круглое, стать размытым… Словом, картинки будут всячески менять свои свойства.

14. Вращающийся треугольник

При нажатии на треугольник, он начинает вращаться.

15. Космос

Целое космическое пространство, умещенное в CSS. Выступает примером наложения вращающихся слоев (более заметно при уменьшении масштаба изображения в браузере).

16. «Менины» в 3D

Интересный эффект CSS, с помощью которого известная картина Диего Веласкеса «Менины» начинает казаться трехмерной.

17. CSS для Mac OS Х

В нижней части экрана представлен набор основных иконок Mac OS Х, которые при наведении увеличиваются. Эффект придает динамики сайту.

18. Drop-In Modals

CSS3 эффекты и свойств Drop-In Modals помогут в создании быстрого, анимированного и простого изменения модальных окон.

19. Анимирование объектов

Трансформация изменяет внешний вид элемента в браузере. Показано на примере ракеты, которая «летит» из одного конца экрана в другой. Могут использоваться инструменты перемещения, вращения и т.

д.

20. Цветные часы

Цветные часы созданы на основе jQuery и CSS3. Подобный эффект придется кстати в контексте ожидания времени завершения какого-нибудь конкурса, голосования и тому подобного.

21. Гелерея Lightbox на jQuery и CSS3

Это замечательная галерея, которая позволяет сортировать и раскладывать изображения в выборочном порядке. Для интерактивности галерея использует JQuery, JQuery UI и JQuery плагин FancyBox. Lightbox поддерживает название и описание картинок, группирует их и автоматически выстраивает слайды в ряд.

22. «Эластичные» превью

Увеличение превью изображений при наведении. Таким образом при клике меню пропорционально увеличивается.

23. Динамичные карточки

Этот пример представляет собой динамический набор карточек с использованием функций HTML и CSS3.

24. Выдвижное JQuery меню

Выдвижное меню из примера создано комбинацией CSS3 и JQuery. При наведении на картинку появляется всплывающее окно с текстом.

25. Табы CSS

В примере наведение курсора мыши на заголовки табов сопровождается сменой приведенного ниже списка.

26. Fisheye меню

На примере продемонстрировано, как с помощью анимации CSS и SVG создать Fisheye меню. В качестве дополнительного бонуса используется демо-SVG в тэге IMG.

27. Выпадающее меню

Такой тип обеспечивает очень удобную навигацию по основному меню, благодаря использованию переходов CSS3.

28. Титры из «Звездных войн»

Знаменитые титры из «Звездных войн». Для их запуска будет достаточно HTML и CSS.

29. Еще эффекты Fisheye на CSS

Опять таки, увеличивающиеся при наведении значки.

30. Анимация по типу «кадр за кадром»

Возможны несколько вариантов демонстрации.
В первом примере для обеспечения смены кадров необходимо кликать на изображение. Каждый клик — одно движение. Кадры повторяются, создается определенная зацикленность.

Во втором примере для смены кадров достаточно провести курсором по изображению. Соответственно и скорость анимации будет зависеть от быстроты движения мыши.

31. Имперский шагоход AT-AT

И снова «Звездные войны» — этот движущийся шагоход AT-AT сделан с помощью CSS3.

32. Еще одна «гармошка» CSS

При клике на строку, таблица раскладывается.

33. Простое выдвижное меню

При наведении секции меняют цвет и выдвигаются.

34. Магические анимационные эффекты в CSS

Показательная подборка разнообразных формаций эффектов. Достаточно кликнуть по клавишам «magic», «swap» и т.д. для демонстрации эффекта.

35. Меню из закладок

36. Прогресс бар

Анимационный прогресс бар на CSS.

37. Салют CSS

В примере показано, как создать салют из кругов на JQuery и CSS.

38. Включатель/выключатель

На примере показано, каким образом можно создать анимированную кнопку on/off с помощью CSS.

39. Цветная загрузка

Пример оригинальной разноцветной анимации загрузки на CSS.

40. Выпадающее меню
Еще один вариант простого и симпатичного выпадающего меню на CSS.

Анимация CSS : Animation : Создание. Эффект Кена Бернса

Потрясающая коллекция плавных CSS-анимаций для использования на веб-странице. Создание анимации. Эффект Кена Бернса. Применение. Модификаторы. Разметка. Готовые примеры.

Создание анимации

Добавьте один из классов .uk-animation-* к любому элементу. Анимация сработает при добавлении класса, обычно это сразу при загрузке страницы. Чтобы показать анимацию в определенное время, например, когда элемент входит в область просмотра страницы, вы должны добавить класс с использованием JavaScript — например, применить компонент Scrollspy. Компонент Scrollspy используется во многих компонентах UIkit 3, которые используют анимацию.

Все анимации UIkit 3 реализованы с помощью CSS, поэтому для их использования не требуется JavaScript.

Класс	Описание
`.uk-animation-fade`	Элемент плавно, постепенно появляется; исчезает см. реверс.
`.uk-animation-scale-up` `.uk-animation-scale-down`	Появляющийся элемент увеличивается в масштабе, масштабируется изнутри или снаружи.
`.uk-animation-slide-top` `.uk-animation-slide-bottom` `.uk-animation-slide-left` `.uk-animation-slide-right`	Новоявленный элемент скользит сверху, снизу, слева или справа ориентируясь на свою собственную высоту или ширину.
`.uk-animation-slide-top-small` `. uk-animation-slide-bottom-small` `.uk-animation-slide-left-small` `.uk-animation-slide-right-small`	Желанный элемент подкатывает сверху, снизу, слева или справа с наименьшей дистанции.
`.uk-animation-slide-top-medium` `.uk-animation-slide-bottom-medium` `.uk-animation-slide-left-medium` `.uk-animation-slide-right-medium`	Элемент исчезает и скользит сверху, снизу, слева или справа со среднего расстояния.
`.uk-animation-kenburns`	Существующий элемент очень медленно масштабируется.
`.uk-animation-shake`	Элемент качает, колбасит, трясет.
`.uk-animation-stroke`	Анимации штрихов SVG. Рисует штрихи (strokes) элемента SVG.

Чтобы запустить анимацию при наведении или фокусе, добавьте в родительский элемент класс .uk-animation-toggle. Также добавьте tabindex="0", чтобы сделать анимацию фокусируемой с помощью клавиатуры и сенсорных устройств.

<div tabindex="0">
    <div></div>
</div>

Результат
Разметка

Модификатор «Реверс»

По умолчанию все анимации являются «входящими», появляются (кроме шейка, его продолжает «колбасить»). Чтобы установить любую анимацию в противоположном направлении, реверсировать, добавьте класс

.uk-animation-reverse.

<div></div>

Результат
Разметка

Модификатор «Быстро»

Эффект быстрой анимации

При необходимости воспроизводить анимацию на более высокой скорости, необходимо добавить к элементу класс .uk-animation-fast. Результат будет — вжик и готово!

<div></div>

Результат
Разметка

Модификатор «ИсточникЪ»

По умолчанию масштабирование анимации происходит из центра. Чтобы изменить это поведение и установить координаты точки, относительно которой будет происходить трансформация элемента, добавьте один из классов . uk-transform-origin-* из компонента с дополнениями — Утилиты : Точка трансформации.

<div></div>

Результат
Разметка

Эффект «Ken Burns»

Чтобы добавить эффект Кена Бернса, добавьте к любому изображению класс .uk-animation-kenburns. Чтобы изменить эффект и установить анимацию в противоположном направлении, вы можете использовать класс .uk-animation-reverse, а для того чтобы установить координаты точки один из классов .uk-transform-origin-* из компонента Утилиты : Точка трансформации.

<img src="" alt="">

По умолчанию анимация запускается при загрузке страницы. В этом примере используется компонент Scrollspy, чтобы переключать эффект, когда изображение входит в облать просмотра.

Результат
Разметка

SVG Strokes

Анимация штрихов SVG

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

В следующем примере показано, как добавить встроенный SVG вручную. Поскольку вы должны знать точную длину обводки, UIkit требует, чтобы вы установили длину в пользовательском свойстве --uk-animation-stroke. В этом примере длина обводки составляет 46.

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <path fill="none" stroke="#000" stroke-width="1" d=""/>
</svg>

Умышленно меньше:

Гораздо проще использовать компонент Изображения SVG, добавив uk-svg="stroke-animation: true" к элементу изображения. Он самостоятельно рассчитает длину обводки и автоматически добавит пользовательское свойство --uk-animation-stroke.

<img src="" uk-svg="stroke-animation: true">

Результат
Разметка

Компоненты UIkit 3

Эффекты W3.

CSS

❮ Назад Далее ❯

Обычный

w3-opacity

w3-оттенки серого-макс.

w3-sepia-max

Классы эффектов W3.CSS

W3. CSS предоставляет следующие классы эффектов:

Класс	Определяет
w3-непрозрачность	Добавляет непрозрачность/прозрачность элементу (непрозрачность: 0,6)
w3-непрозрачность-мин	Добавляет непрозрачность/прозрачность элементу (непрозрачность: 0,75)
w3-непрозрачность-макс	Добавляет непрозрачность/прозрачность элементу (непрозрачность: 0,25)
w3-оттенки серого	Добавляет эффект оттенков серого к элементу (оттенки серого: 75%)
w3-оттенки серого-мин	Добавляет эффект оттенков серого к элементу (оттенки серого: 50%)
w3-оттенки серого-макс.	Добавляет эффект оттенков серого к элементу (оттенки серого: 100%)
w3-сепия	Добавляет элементу эффект сепии (сепия: 75%)
w3-сепия-мин	Добавляет элементу эффект сепии (сепия: 50%)
w3-сепия-макс	Добавляет элементу эффект сепии (сепия: 100%)
w3-hover-opacity	Добавляет прозрачность элементу при наведении (непрозрачность: 0,6)
w3-hover-оттенки серого	Добавляет эффект оттенков серого к элементу при наведении (оттенки серого: 100%)
w3-наведение-сепия	Добавляет эффект сепии к элементу при наведении

Непрозрачность

Классы w3-opacity добавляют прозрачность элементу:

Обычный

w3-opacity-min

w3-opacity

90 002 w3-opacity-max

Пример

jpg»>

Попробуйте сами »

Оттенки серого

Классы w3-grayscale добавляют элементу эффект оттенков серого:

Обычный

w3-grayscale-min

w3-grayscale

9000 2 w3-grayscale-max

Пример

Попробуйте сами »

Примечание: Классы оттенков серого w3 не поддерживаются в IE 11 и более ранние версии.

Sepia

Классы w3-sepia добавляют элементу эффект сепии:

Normal

w3-sepia-min

w3-sepia

90 002 w3-sepia-max

Пример

Попробуйте сами »

Примечание. Классы w3-sepia не поддерживаются в IE 11 и более ранние версии.

Эффекты наведения

Вы также можете добавить специальные эффекты при наведении курсора мыши.

w3-hover-opacity

w3-hover-оттенки серого

w3-hover-sepia

Пример

90 116 <изображение src="image.jpg">

Попробуйте сами »

Hover Opacity Color

Вы также можете комбинировать любые классы w3-hover-color с w3-hover-opacity , чтобы создать слегка «более светлый» цвет фона при наведении:

w3-hover-red

w3-hover-red с w3-hover-opacity

Пример

w3-hover-red с w3-hover-opacity

Попробуйте сами »

❮ Предыдущая Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.

CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

902 18 лучших примеров Примеры HTML
Примеры CSS
Примеры JavaScript
How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

24 креативных и уникальных примера CSS-анимации, которые вдохновят вас

Будь то улучшение кнопки, сокращение времени загрузки страницы или добавление изюминки на целевую страницу, анимация — это эффективный способ привлечь внимание и порадовать зрителей. Ваш сайт.

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

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

Вот почему мы собрали наши любимые примеры CSS-анимации из CodePen — онлайн-инструмента для создания фрагментов кода в HTML и CSS и обмена ими — чтобы помочь творческому потоку течь.

Но сначала краткий обзор темы…

Как работают анимации CSS?

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

Анимация CSS отлично подходит для веб-сайтов, которые хотят добавить динамичный, привлекательный контент, не увеличивая вес страницы. Поскольку они не требуют дополнительных скриптов, анимация CSS вряд ли замедлит работу ваших страниц.

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

Бесплатные шаблоны кода

Бесплатные шаблоны анимации CSS

Используйте эти бесплатные шаблоны анимации CSS на своем веб-сайте.

Для демонстрации приведем простой пример CSS-анимации:

См. пример CSS-анимации пера от Кристины Перриконе (@hubspot) на CodePen.

В этом примере

— это элемент, который мы анимируем. Глядя на CSS, мы видим, что наши объявления анимации связаны с селектором div . Самое важное объявление здесь — animation-name , которое связывает ключевой кадр my-animation с нашим элементом div . Ниже находятся несколько дополнительных объявлений, влияющих на время и поведение анимации.

Сама анимация создается с помощью ключевого кадра, указанного правилом @keyframes . Ключевой кадр определяет начальное состояние анимации (внутри от {} ) и ее конечное состояние (внутри до {} ). Ключевой кадр my-animation изменяет три свойства стиля нашего блока div: background-color , width и top . Когда эти три свойства анимируются одновременно, получается согласованная анимация.

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

Примеры CSS-анимации

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

1. CSS Эффект перехода при наведении мыши

Начнем с того, что эта анимация показывает простой, но эффективный эффект выделения текста, запускаемый действием наведения мыши. Это отличный способ добавить изюминку ссылкам на ваши страницы.

См. эффект перехода от мыши Pen CSS от Адама Аргайла (@argyleink) на CodePen.

Посмотреть код здесь.

2. Простые счетчики загрузки

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

См. Pen Simple HTML & SVG Loading Spinners Стивена Делани (@sdelaney) на CodePen.

Посмотреть код здесь.

3. Анимация прокрутки текста

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

См. анимацию Pen Text от Yoann (@yoannhel) на CodePen.

Посмотреть код здесь.

4. Анимированная кнопка «Отправить»

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

См. чистую CSS-анимацию кнопки отправки пера от Dead Pixel (@dead_pixel) на CodePen.

Посмотреть код здесь.

5. Логотип, реагирующий на наведение

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

См. Шаблон пера: логотип Алекса Каца (@katzkode) на CodePen.

Посмотреть код здесь.

6. Открытие конверта

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

См. Анимированную ручкой кнопку почты CSS от Джейка Джайлса-Филлипса (@jakegilesphillips) на CodePen.

Посмотреть код здесь.

7. Горячий кофе

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

См. «Горячий кофе от Pen» Зейна Уэсли (@zanewesley) на CodePen.

Посмотреть код здесь.

8. Кофемашина

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

См. анимацию Pen Coffee Machine Pure CSS от Henrique Rodrigues (@hjdesigner) на CodePen.

Посмотреть код здесь.

9. Кнопка покачивания

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

См. покачивающуюся кнопку сохранения пера Донована Хатчинсона (@donovanh) на CodePen.

Посмотреть код здесь.

10. Pacman

Я не рекомендую размещать это на вашем сайте из-за риска нарушения авторских прав, но смотреть на него все равно интересно.

См. Pen Pacman от Riccardo (@Ferie) на CodePen.

Посмотреть код здесь.

11.

Три точки Загрузка

Еще один пример анимации CSS, создающей эффект загрузки, с которым многие из нас знакомы. Простое изменение масштаба — это все, что нужно, чтобы сказать: «Минуточку, пожалуйста».

См. загрузчик Pen CSS с точками Алексея Петерсона (@petersonby) на CodePen.

Посмотреть код здесь.

12. Ящики для файлов

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

См. Pen Pure CSS Drawers ʕノ•ᴥ•ʔノ︵ ┻━┻ от Jhey (@jh4y) на CodePen.

Посмотреть код здесь.

13. Цветовой веер

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

См. Цветовую палитру пера с анимацией Pure CSS от Nitish Khagwal (@nitishkmrk) на CodePen.

Посмотреть код здесь.

14. 3D-переключатель

Переключатель включения/выключения является основным элементом дизайна пользовательского интерфейса. В этом примере концепция представлена в трехмерном виде с плавной анимацией переключения состояний. Здесь разработчик изменил элемент ввода флажка CSS во что-то гораздо более интересное.

См. Переключатель пера с ручкой-отверстием Джона Кантнера (@jkantner) на CodePen.

Посмотреть код здесь.

15. Подводная лодка

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

См. Pen Submarine с CSS от Альберто Хереса (@ajerez) на CodePen.

Посмотреть код здесь.

16. Анимированный текст заголовка при наведении курсора

В примере Оливии Нг «Эффект наведения для заголовков» исследуется несколько способов добавить динамичности тексту заголовка. Он показывает, как всего пара ключевых кадров может поднять ваши заголовки.

См. Эффект наведения пера для заголовков от Olivia Ng (@oliviale) на CodePen.

Посмотреть код здесь.

17. Плавающее изображение

«Плавающий» эффект — это тонкое, простое и эффективное использование CSS-анимации. В этом случае он используется для отображения значка с отличными результатами.

См. Анимацию плавающего пера — CSS от Марио Дуарте (@MarioDesigns) на CodePen.

Посмотреть код здесь.

18. Астронавт

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

См. Pen Pure Css Astronaut, анимированный художником-кодировщиком (@Coding-Artist) на CodePen.

Посмотреть код здесь.

19. Minimal Cat

В этом примере разумно используется отрицательное пространство в сочетании с своевременной анимацией CSS. Это простой дизайн, который передает большую индивидуальность только с помощью свойства преобразования CSS.

См. анимацию кошки Pen Pure CSS от Йохана Муше (@johanmouchet) на CodePen.

Посмотреть код здесь.

20. Растущие/сокращающиеся стержни

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

Посмотрите время воспроизведения логотипа Pen от Дэна Педдла (@dazld) на CodePen.

Посмотреть код здесь.

21. Лазертаг

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

See the Pen Светящийся загрузчик — анимация на чистом CSS от Максима Россиньола (@Maxoor) на CodePen.

Посмотреть код здесь.

22. Свечи

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

См. анимацию Pen Funny Candle Pure CSS от Kevin David (@kevin_David_k) на CodePen.

Посмотреть код здесь.

23. Speedy Truck

«Speedy Truck» Криса Джонсона использует параллакс для имитации движения грузовика в естественных условиях. Несмотря на минимализм, это перо компенсирует это несколькими творческими применениями свойства преобразования — есть даже небольшая неровность на дороге.

См. грузовик Pen Speedy от Криса Джонсона (@ChrisJohnson) на CodePen.

Посмотреть код здесь.

24. Снежный шар

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

См. анимацию Pen Christmas Snow Globe от Coding Artist (@Coding-Artist) на CodePen.

Посмотреть код здесь.

25. Gif с камином

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

См. демонстрацию Pen CSS «animation» Slide Right от HubSpot (@hubspot) на CodePen.

Последний пример

Как мы видели, всего лишь небольшая анимация CSS может иметь большое значение для создания более захватывающего опыта для ваших посетителей. Лучшие анимации служат вашему контенту и опыту, не отвлекая и не выглядя бесполезными — все приведенные выше примеры удивительно хорошо соблюдают этот баланс.