Разное

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

24.05.2023

Содержание

Еженедельная подборка красивых эффектов на CSS/SVG/JS #72 — CSS-LIVE

Подборка свежих эффектов, интересных идей и полезных наработок.

CSS-иллюстрация «Спортсменка»

По клику на кнопки «Run» и «Walk» девушка переходит на бег или ходьбу.
Нижние кнопки управления меняют среду и образ девушки, а ползунком можно управлять скоростью движения.
Эффектнее смотрится в полностраничном режиме.
Технологии: CSS, CSS-переменные, CSS-анимация, CSS-трансформации.
Автор: White Pallet (@WhitePallet)

Посмотреть живой пример

Имитация экрана

Автор демонстрирует, как CSS-функция matrix3d() может применяться с целью имитации экрана.
Технологии: CSS-функция matrix3d(), CSS-трансформации, iframe.
Автор: Джордж В. Парк (@GeorgePark)

Посмотреть живой пример

Анимация статуса

Кнопки управляют анимацией: «Пассивный», «Ожидает», «Размышляет», «Вводит текст», «Фигачит по клавиатуре».
Технологии: SVG, CSS-трансформации, CSS-анимация, React.js.
Автор: Бард Н. Ховде (@bnhovde)

Посмотреть живой пример

Многоуровневое боковое меню

Меню выдвигается при наведении на одну из иконок слева.

Технологии: CSS, CSS-трансформации, JS, jQuery.js.
Автор: Аарон Авад (@blindpiggy)

Посмотреть живой пример

Медведь на мопеде

Технологии: CSS, Create.js.
Автор: Камерон Фицвиллиам (@CameronFitzwilliam)

Посмотреть живой пример

Трехмерный мишка

Кликом и удерживанием курсора можно «крутить» мишку.
Технологии: CSS.
Автор: Дэйв ДеСандро (@desandro)

Посмотреть живой пример

Генератор лиц

Лица генерируются заново по клику в любом месте.
Технологии: canvas, JS.
Автор: Жерар Феррандес (@ge1doot)

Посмотреть живой пример

Бесконечная стопка бумаг

Стопка генерируется заново по клику в любом месте.


Технологии: canvas, JS.
Автор: Жерар Феррандес (@ge1doot)

Посмотреть живой пример

Хамелеон

Хамелеон меняет свой окрас по клику на листик другого цвета.
Технологии: CSS-переменные, JS, Lottie-web.
Автор: kittons (@airnan)

Посмотреть живой пример

Варианты стилизации кнопок при наведении

Технологии: CSS.
Автор: Параскевас Нтинакис (@perry_nt)

Посмотреть живой пример

Эффекты волны при клике на кнопку

Технологии: CSS-переменные, CSS-трансформации, JS.
Автор: jakob-e (@jakob-e)

Посмотреть живой пример

Меню действий на CSS

Внизу кнопка, по клику на которой появляется меню.
Технологии: CSS.
Автор: Рафаэль Л. Перейра (@rafarlp)

Посмотреть живой пример

Трактор

Технологии: SVG, CSS-переменные, CSS-трансформации, JS.
Автор: Mandax (@mandax)

Посмотреть живой пример

Флажки с текстом на ветру

Технологии: SVG, CSS-переменные, CSS-трансформации, JS.
Автор: Дэн Уилсон (@danwilson)

Посмотреть живой пример

Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях.

P.S. Это тоже может быть интересно:
  • Canvas, CSS, CSS3, HTML, JavaScript, JSS, SVG, анимация

Последние новости

Последние новости

Последние комментарии

Последние комментарии

Поддержите проект

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

    • Главная
    • UIkit 2

Потрясающая коллекция плавных 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>
  • Результат
  • Разметка

  • Scale Up

    Scale Down

    Bottom

    Left Small

    Top Small

    Bottom Small

    Right Small

    Left Medium

    Top Medium

    Bottom Medium

    Right Medium

  • <div uk-grid>
    <div tabindex="0">
        <div>
            <p>Fade</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Scale Up</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Scale Down</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Shake</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Left</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Top</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Bottom</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Right</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Left Small</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Top Small</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Bottom Small</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Right Small</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Left Medium</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Top Medium</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Bottom Medium</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Right Medium</p>
        </div>
    </div>
</div>

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

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

<div></div>
  • Результат
  • Разметка

  • Scale Up

    Scale Down

    Bottom

    Left Small

    Top Small

    Bottom Small

    Right Small

    Left Medium

    Top Medium

    Bottom Medium

    Right Medium

  • <div uk-grid>
    <div tabindex="0">
        <div>
            <p>Fade</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Scale Up</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Scale Down</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Shake</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Left</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Top</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Bottom</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Right</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Left Small</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Top Small</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Bottom Small</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Right Small</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Left Medium</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Top Medium</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Bottom Medium</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Right Medium</p>
        </div>
    </div>
</div>

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

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

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

<div></div>
  • Результат
  • Разметка

  • Bottom

  • <div uk-grid>
    <div tabindex="0">
        <div>
            <p>Fade</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Bottom</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Right</p>
        </div>
    </div>
</div>

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

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

<div></div>
  • Результат
  • Разметка

  • Bottom Right

    Top Center

    Bottom Center

  • <div uk-grid>
    <div tabindex="0">
        <div>
            <p>Bottom Right</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Top Center</p>
        </div>
    </div>
    <div tabindex="0">
        <div>
            <p>Bottom Center</p>
        </div>
    </div>
</div>

Эффект «Ken Burns»

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

<img src="" alt="">

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

  • Результат
  • Разметка
  • <div uk-grid>
    <div>
        <div>
            <img src="/demo/img/dark. jpg" 
                 alt="Демо изображение" loading="lazy" 
                 uk-scrollspy="cls: uk-animation-kenburns; repeat: true">
        </div>
    </div>
    <div>
        <div>
            <img src="/demo/img/dark.jpg" 
                 alt="Демо изображение" loading="lazy" 
                 
                 uk-scrollspy="cls: uk-animation-kenburns; repeat: true">
        </div>
    </div>
</div>

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">
  • Результат
  • Разметка
  • <div uk-grid>
    <div tabindex="0">
        <img src="/demo/img/strokes. svg" alt="SVG изображение" uk-svg="stroke-animation: true">
    </div>
    <div tabindex="0">
        <img src="/demo/img/strokes.svg" alt="SVG изображение" uk-svg="stroke-animation: true">
    </div>
</div>

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

95 примеров CSS-анимации

Коллекция бесплатных примеров кода HTML и CSS-анимации из Codepen, Github и других ресурсов. Обновление июньской коллекции 2021 года. 18 новых предметов.

  1. Библиотеки анимации CSS
О коде

Эффект старого фильма — анимация на чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отвечает: да

Зависимости: —

О коде

Носферату — Анимация на чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Задержка анимации

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отвечает: да

Зависимости: —

О коде

CSS Sprite Покадровая анимация

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Pure CSS Цветущие цветы с падающими листьями

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Растущий цветок One DIV

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Круги и линии

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимационный калейдоскоп на чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Точка Тире

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Иллюстрация приборной панели анимирована только с помощью CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Магические шлюзы на чистом CSS с Houdini

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Только CSS Затвор камеры

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Вступительная анимация Netflix на чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Берлин Анимированный

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Раскрытие шахматной доски

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Кинематографическая анимация

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Добро пожаловать

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отвечает: да

Зависимости: —

О коде

AnimXYZ Пример

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: animxyz. css

О коде

Анимация птиц

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Перемены настроения

Бесконечно зацикленная анимация в CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Анимация неоморфизма

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимация CSS с движением

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

День и ночь: объяснение CSS-переходов и анимации

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Настольная анимация CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Только CSS: Moon Clip

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

CSS потрясающий

Ноль div анимация с бесконечным масштабированием.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимированный 3D-тостер CSS

Нажмите на тостер, чтобы приготовить булочки. Наведите курсор на края страницы, чтобы повернуть.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Только CSS Анимированная солнечная система

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Складная панорама Анимация

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

CSS-анимация SVG-построение

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Закрыть жалюзи

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

CSS-анимации с SVG

Переходы и анимация в сочетании с SVG.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Чистый глаз CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Сосиска-собака Анимация только CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Рок-н-ролльный полумарафон Анимация

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Письмо CSS-анимация

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Вечерние фонари

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Задача трех тел

Вдохновлен научно-фантастическим романом Лю Цысиня «Задача трех тел».

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отвечает: да

Зависимости: —

О коде

2020 Анимация SVG

Дэвид Хуршид и Стивен Шоу празднуют Новый год этой забавной анимацией 2020 года с использованием нарисованных вручную путей SVG, показывая, как упростить анимацию stroke-dasharray/stroke-dashoffset с помощью pathLength=1 .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Эффект раскрытия блока CSS

Измените --td (общая продолжительность), чтобы увеличить/уменьшить время действия эффекта.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Только куб CSS 3D

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Веб-слои темпа

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Пишущая машинка CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Только CSS: Размытие в движении

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Анимация со смещением размытия в движении

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Только анимация CSS #02

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Только Css анимация #03

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Бумажный пируэт

3D анимация бегущей страницы только на CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Только анимация CSS #01

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Круг становится квадратом

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Вечный двигатель

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Страница продукта

Страница продукта с анимацией ключевых кадров CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: font-awesome. css

С код

Поддельный изменяемый шрифт с CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимация SVG

Некоторые SVG-анимации и ключевые кадры.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Коробка-трансформер: коробка-наполнитель

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимированная наклейка

Анимированная наклейка в HTML и CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Отвечает: да

Зависимости: —

О коде

Каменная рука Анимация

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

h3O — Анимация химической колбы

Химическая колба

SVG слегка анимирована с помощью CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимация подводной лодки на чистом CSS

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Свечи (чистая анимация CSS)

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Кит и Луна

Чистый CSS кит и анимация луны.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Кассетная анимация CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Кофемашина Анимация

Кофемашина с чистой CSS анимацией.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Анимация солнечного затмения

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

CSS Box Анимация собаки

…

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Сцена маяка CSS

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Биты и байты Анимация CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Анимация блокчейна Crypto Web3

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимация точечного меню

Четыре различных анимации меню для кнопки меню переключаются между точками, крестиком и значком назад.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Циклическая анимация

Циклическая анимация прокрутки увеличительного стекла.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: font-awesome.css

О коде

Анимация усатой няни на чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Справочник анимации

Анимация загрузки справочника.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Анимация парения книг

Хорошая анимация при наведении для обложки книги.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Подключенная анимация

Простая связанная анимация для модальных окон.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Адаптивная и анимированная ветряная мельница

Ветряная мельница (Мопс + SCSS) — отзывчивая и анимированная.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отвечает: да

Зависимости: —

О коде

Анимация маски CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

CSS-анимация: время суток

Эксперимент с анимацией CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: simple-line-icons.css, jquery.js

О коде

CSS-анимация: в помещении или на улице?

Недавно участвовал в проекте, где нужно было делать анимацию. Мы использовали After Effects > JSON > некоторые магические плагины, но мне было интересно, смогу ли я воспроизвести точно такой же эффект с помощью CSS. — Оливия

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: simple-line-icons.css, jquery.js

О коде

Только CSS Анимация границ

Только CSS анимация границ при наведении. Для работы ему нужен сплошной фон.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Pure CSS Сатурн Хулахуп

Титан часы Сатурн хулахуп! Преобразование этого gif в чистый CSS: https://dribbble.com/shots/4252236-Saturn-Hula-Hooping

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

UX в движении. Анимация

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Привлечь внимание анимации

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Сетка перспективы с анимацией

Эта галерея использует CSS Grid Layout и перспективу CSS3, чтобы создать что-то немного уникальное.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: jquery.js

О коде

Чистая губка CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Анимация отображения CSS

Анимация css , которая показывает текст и изображение с задержкой/направлением.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: jquery.js

О коде

Анимированное фоновое свечение

Псевдоэлемент, анимация и размытие фонового градиента.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Любящая машина — чистый CSS с анимацией

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Крутой макет со сложной последовательной анимацией

Исходя из этого — https://dribbble.com/shots/2802024-Satellite-Website-Prototype. Основанная на добавлении всего 2 классов с JS (и простого наведения), эта демонстрация содержит множество классных анимаций цепочки в сочетании с хорошей производительностью и довольно простым в обслуживании SCSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Парк развлечений Flat Design с анимацией CSS

Плоский дизайн Парк развлечений, анимированный с помощью чистого CSS3.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Анимация волн CSS и SVG

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Анимация смахивания карты

Анимация считывания карты Material Design.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Дизайн материалов для анимации CSS

HTML и CSS Material Design с анимацией.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Анимированные иконки корзины покупок

Просто экспериментирую с SVG-анимацией и интерактивностью для «Fake Fruit Shop».

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Анимированные пузыри на чистом CSS

Анимированные пузыри , использующие только HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Анимация пламени CSS

Анимированное пламя с использованием только анимации CSS3 и box-shadow . Хотел посмотреть, смогу ли я разжечь огонь, используя только CSS — огонь горит!

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Анимация подписи

Чистый CSS, легкая фирменная анимация . Никакой GIF-анимации, только облегченная (20 КБ) последовательность PNG, анимированная с помощью CSS3. Кнопка анимации «Повтор» без JS, чистый CSS. Изменение цвета знака при наведении.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Облачная спираль

CSS-анимация облачной спирали.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Анимация — Tailwind CSS

Основное использование

Вращение

Добавьте утилиту animate-spin , чтобы добавить линейную анимацию вращения к таким элементам, как индикаторы загрузки.

 <тип кнопки = "кнопка" отключена>
  
    
  
  Обработка...

​Ping

Добавьте утилиту animate-ping , чтобы сделать элемент масштабируемым и затухать, как сигнал радара или рябь воды — полезно для таких вещей, как значки уведомлений.

 <диапазон>
  <промежуток> 
  <промежуток>

​Pulse

Добавьте animate-pulse 9Утилита 0270 для плавного появления и исчезновения элемента — полезна для таких вещей, как загрузчики скелетов.

 <дел>
  <дел>
    <дел>
    <дел>
      <дел>
      <дел>
        <дел>
          <дел>
          <дел>
<дел>