В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.
CSS 3D облака
В этом демо Вы сможете создавать и редактировать причудливые облака в 3D. Данные облака на CSS дают понять нам, что возможности веб технологий практически безграничны.
Логотипы на чистом CSS
Это примеры логотипов сделанных только на чистом CSS. Вы только вдумайтесь, при создании не использовались изображения. Это просто нечто.
Алфавит с CSS анимацией
Отличный и художественный пример использования CSS в алфавите
3D навигация для сайта
Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.
Дудл от Google на CSS
Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации
Слайдер
Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.
Двойное анимированное кольцо
Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS
Размытие на CSS
Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке.
Полное руководство по Flexbox
Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.
Красочное и анимированное меню на CSS3
Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.
CSS фильтры
Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.
CSS формы
Пост о CSS формах с многочисленными примерами
Прогресс бары на CSS
Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.
Анимация — Animate.css
Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный.
Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript. Анимация применяется к любым html-элементам, а также к псевдоэлементам :before и :after
Поддержка браузерами
IE:
10.0
Firefox:
16.0, 5.0 -moz-
Chrome:
43.0, 4.0 -webkit-
Safari:
4.0 -webkit-
Opera:
12.1, 12.0 -o-
iOS Safari:
9, 7.1 -webkit-
Opera Mini:
-
Android Browser:
44, 4.1 -webkit-
Chrome for Android:
44
Чтобы воспользоваться анимацией в своём проекте, вам достаточно сделать две вещи:
- Создать саму анимацию c помощью ключевого слова @keyframes
- Подключить её к элементу, который надо анимировать, и указать нужные свойства.
Правило @keyframes
Правило @keyframes позволяет создавать анимацию с помощью ключевых кадров - состояний объекта в определенный момент времени.
Ключевые кадры анимации создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты.
Если не задан начальный (from , 0%) или конечный (to , 100%) кадр, браузер установит для них расчётные значения анимируемых свойств такими, какими они были бы если бы не была применена анимация.
Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего.
При определении анимации сразу после свойства @keyframes должно следовать имя данной анимации (данное имя затем должно быть указано в свойстве animation элемента, который будет анимирован).
@keyframes move { from { transform: translateX(0px); } 50% { transform: translateX(130px); } 100% { transform: translateX(0px); } }
@keyframes move { from { 50% { 100% { transform : translateX (0px ) ; |
Мы создали анимацию, которая работает следующим образом:
- Начало анимации (from можно было написать 0%) — положение элемента по оси Х равно 0px;
- Середина анимации (50%) — положение элемента по оси Х равно 130px;
- Конец анимации (to мы использовали 100%) — возвращаем элемент на начало анимации, т.е. положение элемента по оси Х равно 0px;
Здесь и далее для удобства я написал в примерах несколько строчек JavaScript, которые будут поочередно добавлять или удалять класс с анимацией на элементе, поэтому для воспроизведения анимации просто кликните по этому элементу.
Ключевые кадры можно группировать:
@keyframes move { from { transform: translateX(0px); } 25%, 50% { transform: translateX(130px); } 100% { transform: translateX(0px); } }
@keyframes move { from { transform : translateX (0px ) ; 25%, 50% { transform : translateX (130px ) ; 100% { transform : translateX (0px ) ; |
Одному элементу можно назначить несколько анимаций, их имена и параметры надо писать в порядке присвоения:
element { animation-name: animation-1, animation-2; animation-duration: 2s, 4s; }
element { animation-name : animation-1, animation-2 ; animation-duration : 2s, 4s ; |
Подключение анимации к элементу происходит двумя командами — animation-name и animation-duration .
Название анимации
Свойство animation-name задает имя анимации. Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно слово или несколько, связанных между собой при помощи пробела — или нижнего подчеркивания _.
animation-name: move;
Временная функция
Свойство animation-timing-function позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. Обратим внимание, что скорость воспроизведения анимации чаще всего нелинейная, т.е. ее мгновенная скорость в разных участках будет отличаться. На данный момент существует несколько уже встроенных аргументов для этого правила: ease , ease-in , ease-out , ease-in-out , linear , step-start , step-end .
Однако такие функции можно создавать самому. Специальная функция cubic-bezier (P1x, P1y, P2x, P2y); принимает четыре аргумента и строит на их основе кривую распределения значений в процессе анимации. Потренироваться в создании своих функций и посмотреть как они работают можно на этом сайте .
И, наконец, анимацию можно превратить в набор дискретных значений с помощью функции steps (количество шагов, направление), в качестве аргументов которой задаётся количество её шагов и направление, которое может принимать значения start или end .
- ease — функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
- linear — анимация происходит равномерно на протяжении всего времени, без колебаний в скорости; соответствует cubic-bezier(0,0,1,1).
- ease-in — анимация начинается медленно, а затем плавно ускоряется в конце; соответствует cubic-bezier(0.42,0,1,1).
- ease-out — анимация начинается быстро и плавно замедляется в конце; соответствует cubic-bezier(0,0,0.58,1).
- ease-in-out — анимация медленно начинается и медленно заканчивается; соответствует cubic-bezier(0.42,0,0.58,1).
- cubic-bezier(x1, y1, x2, y2) — см.выше.
- inherit — наследует это свойство от родительского элемента.
Визуальное сравнение
Анимация с задержкой
Свойство animation-delay определяет задержку до начала воспроизведения анимации, задаётся в секундах или миллисекундах. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Если вы хотите, чтобы анимация началась с середины, задайте отрицательную задержку, равную половине времени, установленном в animation-duration . Не наследуется.
element { animation-name: animation-1; animation-duration: 2s; animation-delay: 10s; // Перед стартом этой анимации пройдет 10 сек. }
Повтор анимации
Свойство animation-iteration-count позволяет запустить анимацию несколько раз. Не наследуется. В качестве значения выставляем любое положительное значение 1, 2, 3 … и т.д. либо infinite для бесконечного повторения. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания.
Мы собрали для вас подборку лучших примеров JQuery анимации и CSS3 . Вы можете посмотреть исходный код, чтобы понять, как анимируется каждый из примеров.
Работающие часы на основе CSS3
Работающие часы на CSS3 , в примере используется анимация и фигуры CSS , без изображений или JavaScript :
Демо-версия Скачать
Анимированные облака на CSS3
В данном примере используется только анимация CSS3 :
Демо-версия Скачать
Анимированные иконки погоды на CSS3
Демо-версия Скачать
Анимации загрузки на CSS3
Демо-версия Скачать
3D вращающаяся планета на основе CSS3
Отличная идея и сочетание двух концепций. А немного доработав масштабирование и анимацию, можно удивительный результат!
Демо-версия Скачать
Эффект анимации текста
Демо-версия Скачать
3D анимированная диаграмма
3D диаграмма , созданная с помощью HTML и CSS3-преобразований . Тени созданы с помощью градиентов CSS , анимация — с помощью переходов. AngularJS используется для обновления данных:
Демо-версия Скачать
JQuery эффект анимации снега
Демо-версия Скачать
CSS3-анимации загрузки
Демо-версия Скачать
Анимированная иконка гамбургер-меню на CSS3
Демо-версия Скачать
AT-AT (шагающий броневик из Звездных войн) на CSS3
Пример, который я создал на CSS3 . Можно было бы, конечно, уменьшить количество div , использованных для создания частей тела. Также стоило бы оптимизировать пример и добавить класс JQuery с анимацией :
Демо-версия Скачать
Gran Turismo
Демо-версия Скачать
3D Солнечная система
Демо-версия Скачать
Анимация дыма
Это CSS3-версия анимации. Клубы дыма создаются без изображений, а анимация задается без использования JavaScript и JQuery эффектов анимации:
Демо-версия Скачать
Анимированный логотип
Демо-версия Скачать
IE10 3D куб
Демо-версия Скачать
Анимация языков пламени на основе CSS3
Демо-версия Скачать
Логотип Бэтмена на -webkit- CSS3 анимация
Демо-версия Скачать
Концепт дизайна погодного приложения на основе CSS
Демо-версия Скачать
Анимация природы на CSS3
Демо-версия Скачать
Гуляющий кот (цикл без JQuery анимации)
Демо-версия Скачать
3D-терминал на CSS3
Демо-версия Скачать
Анимированный график на CSS3
Линейный график на HTML и CSS3 . При наведении курсора мыши на раздел отображается его название. Данные заполняются и обновляются с помощью AngularJS . Преобразование вращения вручную применено к точкам графика, а анимация задается с помощью переходов CSS3 :
Демо-версия Скачать
Вращающиеся 3D HTML-формы с помощью CSS3
Демо-версия Скачать
Анимации индикатора подключения на основе CSS3
Демо-версия Скачать
Steps-анимация на Jquery
Анимации JQuery пример, иллюстрирующий функцию тайминга анимации: steps() в сочетании с листом спрайтов:
Продвинутая анимация траектории
Анимация с применением SVG , которая может пригодиться при разработке анимации траектории:
Скачать / Дополнительная информация
Анимации прокручивания с использованием wow.js
Скачать / Дополнительная информация
Анимация с использованием листов спрайтов на CSS
Ниже приводятся пример с использованием листов спрайтов с пояснениями без JQuery эффектов анимации:
Скачать / Дополнительная информация
Анимированный логотип для Herr Brueckers
Скачать / Дополнительная информация
Анимация рисования контура
Скачать / Дополнительная информация
Бесконечная анимация галереи на основе анимации блока JQuery
Скачать / Дополнительная информация
Анимированные круги с использованием CSS / SVG
Скачать / Дополнительная информация
SVG-анимация с помощью CSS
Пример того, как анимировать SVG . Для демонстрационных целей я использовал иконки «Small Icons » Ника Фроста и Грега Лапена :
Скачать / Дополнительная информация
CSS3 параллакс анимация боевых истребителей от MySkins Studio
Это еще одна CSS3 анимация , созданная с использованием параллакса CSS3 и кейфреймов, но без JQuery анимации :
Скачать / Дополнительная информация
Анимированный SVG-логотип
Скачать / Дополнительная информация
Плоская анимированная круговая иконка на основе CSS3
Скачать / Дополнительная информация
Анимация с setTimeout
Небольшой пример синхронизации анимации, в которой вокруг экрана перемещается шар, с помощью setTimeout :
Скачать / Дополнительная информация
SVG-анимация солнца с использованием CSS
Скачать / Дополнительная информация
JQuery-анимация
Простая JQuery анимация:
Скачать / Дополнительная информация
CSS-анимация орбиты Земли
Скачать / Дополнительная информация
Анимация летящей птицы на CSS3
Скачать / Дополнительная информация
Анимация атома на основе CSS3
Скачать / Дополнительная информация
3D-анимация часов с использованием JS
В процессе разработки использовались 3D-эффекты CSS3 и JQuery анимация текста. Пример работает в Google Chrome 28.0 и Firefox 22.0 . В то же время анимация не работает в IE 10 из-за какой-то ошибки доступа JQuery , которую я не удосужился исправить:
Скачать / Дополнительная информация
Анимированное Лондонское обзорное колесо из двух элементов
Скачать / Дополнительная информация
Анимация Drag Race
Анимация гонок на чистом CSS / HTML :
Скачать / Дополнительная информация
Анимированный праздничный торт
Скачать / Дополнительная информация
Анимированный логотип
Этот анимированный логотип без JQuery эффектов анимации выглядит очень элегантно:
Скачать / Дополнительная информация
Анимированный логотип компании на основе CSS3
Анимированный логотип компании на чистом HTML / CSS3 :
Скачать / Дополнительная информация
Анимированная иконка камеры
Скачать / Дополнительная информация
Анимация оранжевого автомобиля
Скачать / Дополнительная информация
Анимированная иконка Wi-Fi
Скачать / Дополнительная информация
Анимированные адаптивные CSS- иконки погоды
Это небольшой набор анимированных иконок погоды на CSS . Обратите внимание, что большая часть анимации создается с помощью псевдо-элементов и JQuery анимации:
Скачать / Дополнительная информация
Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.
Обязательное условие - наличие конкретных значений. Свойства со значением auto не анимируются.
Сафари в настоящее время не поддерживает анимацию псевдоэлементов, для просмотра записи воспользуйтесь другими браузерами
Пример Css-анимации:
Пример кода анимации:
@keyframes move { 40% { left: 50%; bottom: 75%; animation-timing-function: ease-in; } 80% { left: 90%; bottom: -10em; } }
Подключение анимации:
Sun { animation: move 15s infinite linear; }
move - имя анимации 15s - длительность infinite - бесконечное повторение linear - тип движения
@keyframes
Сама анимация задается внутри блока @keyframes . После @keyframes задается имя анимации, а потом внутри фигурных скобок - её шаги.
Шаги можно задавать через проценты или с помощью ключевых слов from и to . При этом в шагах можно менять тип анимации (animation-timing-function):
Animation-name
Используется для задания имени анимации.
Возможные значения: одно или несколько имен анимации. Значение по умолчанию: нет.
animation-name: move; - одна анимация. animation-name: move, sun-color; - две анимации, имена задаются через запятую.
Animation-duration
Длительностью анимации управляет свойство animation-duration .
Возможные значения: время в секундах (s) или миллисекундах (ms). В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение - 0s.
Animation-timing-function
Свойство определяет тип анимации.
Возможные значения:
Плавная анимация ease - скольжение (значение по умолчанию) linear - ровное движение ease-in - ускорение к концу ease-out - ускорение в начале ease-in-out - более плавное скольжение, чем ease
cubic-bezier(число,число,число,число) позволяет задавать сложный тип анимации. Значения удобно подбирать на cubic-bezier.com .
cubic-bezier(.24,1.49,.29,-0.48);
Пошаговая анимация step-start и step-end - позволяют задать пошаговую анимацию, обязательно задавать конкретные шаги. При этом с step-start изменения происходят в начале шага, а с step-end - в конце.
step-end . Если выставить step-start , счетчик будет начинаться с единиц.
steps(число) - позволяет задать количество шагов, за которые будет выполнена анимация, при этом можно задать только последний шаг без необходимости указывать промежуточные.
Animation-iteration-count
Управляет повторением анимации. Значение по умолчанию: 1 (анимация проигрывается один раз).
Возможные значения:
число - сколько раз проиграть анимацию. infinite - бесконечное повторение.
Animation-direction
Отвечает за направление анимации.
Возможные значения:
normal - анимация проигрывается в обычном направлении, с начала и до конца. reverse - анимация проигрывается в обратном направлении, то есть с конца. alternate - анимация проигрывается с начала и до конца, а затем в обратном направлении. alternate-reverse - анимация проигрывается с конца до начала, а затем в обратном направлении.
Animation-play-state
Управляет остановкой и проигрыванием анимации.
Возможные значения: running - анимация проигрывается (значение по умолчанию). paused - анимация застывает на первом шаге.
Управлять шагом, где будет остановка, не получается, но можно останавливать анимацию по:hover:
Animation-delay
С помощью animation-delay можно задавать задержку анимации перед началом воспроизведения.
Возможные значения: время в секундах (s) или миллисекундах (ms). Значения могут быть отрицательными. В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение - 0s.
Animation-fill-mode
Свойство определяет будет ли анимация воздействовать на элемент вне времени воспроизведения анимации.
Возможные значения:
none - анимация воздействует на элемент только во время воспроизведения, по окончании элемент возвращается в исходное состояние. forwards - анимация воздействует на элемент по окончании воспроизведения. backwards - анимация воздействует на элемент до начала воспроизведения. both - анимация воздействует на элемент и до начала, и после окончания воспроизведения.
Чтобы увидеть как backwards и both работают до начала воспроизведения анимации, задана задержка animation-delay: 3s; . Так же для этого имеет смысл открыть пример в новом окне.
Все эти свойства можно записать с помощью короткой записи, например:
Animation: timing 5s infinite alternate;
Обязательные значения - имя анимации и длительность. Первое временное значение считается длительностью воспроизведения, второе - задержкой.
Приветствую, друзья! Сегодня мы рассмотрим интереснейшую тему - создание CSS анимаций на реальном примере. Кульминацией данного урока будет создание красивой CSS анимации логотипа на миллион долларов.
Класснуть
Запинить
Материалы урока
- Исходники: Скачать
- Базовый пример из урока: https://codepen.io/agragregra/pen/PKNavm
- Стартовый шаблон из урока: https://github.com/agragregra/optimizedhtml-start-template
Немного теории
Прежде, чем приступить к созданию анимированного примера, следует обратиться к основам CSS анимации , рассмотреть базовые термины, свойства и правила создания CSS анимаций.
Если у вас уже был опыт создания анимаций в каких-либо приложениях, таких, как Adobe After Effects или престарелый Flash Professional (ныне Adobe Animate), то вам должны быть знакомы такие понятия, как «Ключевые кадры», «Временные функции или динамика движения», которые, как и в любой другой сфере анимации применимы и к анимации элементов на странице посредством CSS. Однако, в отличие от работы с интерфейсами приложений, вы создаёте вашу CSS анимацию посредством написания кода в редакторе.
CSS правило @keyframes
Создание CSS анимации начинается с объявления имени анимации в блоке @keyframes и определения так называемых шагов анимации или ключевых кадров.
Для рассмотрения теории и основ мы будет использовать чистый CSS, а в дальнейшем, уже на более сложном примере подключим использование Sass препроцессора. Подробнее узнать о Sass вы можете в уроке . Кроме того, для более глубокого понимания основ CSS, также рекомендую ознакомиться с уроками «Основы CSS - Руководство для самых маленьких» и «Все CSS селекторы в одном уроке»
Давайте рассмотрим структуру @keyframes и работу с ключевыми кадрами на простом примере:
@keyframes turning { 0% { border-radius: 0 0 0 0; transform: rotate(0deg); } 25% { border-radius: 50% 0 0 0; transform: rotate(45deg); } 50% { border-radius: 50% 50% 0 0; transform: rotate(90deg); } 75% { border-radius: 50% 50% 50% 0; transform: rotate(135deg); } 100% { border-radius: 50% 50% 50% 50%; transform: rotate(180deg); } }
В первой строчке мы видим, что после ключевого слова @keyframes идёт его название « turning». Это и есть наименование блока кеймфреймов, к которому мы будем обращаться далее.
После объявления открывается фигурная скобка (в данном примере на чистом CSS), в которой последовательно от 0% до 100% прописываются свойства для каждого ключевого кадра. Обратите внимание, что между 0% и 100% вы можете вставлять сколько угодно промежуточных значений, будь-то 50%, 75% или даже 83%. Это очень похоже на таймлайн приложения для создания анимации, где между двумя состояниями можно добавить любое промежуточное.
Далее этот блок кода с ключевыми кадрами можно применить к любому CSS селектору, но чаще всего они готовятся для конкретного селектора, если мы хотим добиться определённого поведения именно от нужного блока.
Обращение к блоку ключевых кадров
После того, как мы задали ключевые кадры для объекта (в жизни это делается параллельно или даже после обращения к блоку с ключевыми кадрами), можно обратиться к нашему новоиспечённому блоку. Давайте посмотрим на следующий простой код из примера выше:
Div { width: 120px; height: 120px; background-color: violet; margin: 100px; animation: turning 2s ease-out 1s infinite alternate; }
Ничего особенного до последней строчки. Здесь мы определяем то, как будет выглядеть объект изначально и в последней строчке блока обращаемся к блоку ключевых кадров с наименованием «turning»:
Animation: turning 2s ease-out 1s infinite alternate;
Если с определением ключевых кадров всё относительно понятно, то данная строчка нуждается в немедленном объяснении. Как мы видим, сначала идёт CSS свойство «animation». Это сокращённая форма записи, как например, свойство «margin: 20px 30px 40px 50px», которое можно разделить на несколько отдельных свойств:
По данной аналогии, составное свойство «animation» можно разделить на несколько отдельных свойств:
| animation-name | Название анимации, к которому происходит обращение из @keyframes |
| animation-duration | Продолжительность или на какое время растягивается выполнение CSS анимации. Может задаваться в секундах (s) или миллисекундах (ms) |
| animation-timing-function | Временная функция, динамика движения объекта или изменения свойства (ease - (по-умолчанию) анимация начинается медленно, разгоняется и заканчивается медленно; linear - анимация происходит равномерно; ease-in - начинается медленно и ускоряется к последнему ключевому кадру; ease-out - начинается быстро и плавно замедляется вконце; ease-in-out - медленно начинается и медленно заканчивается) |
| animation-delay | Время задержки анимации ДО старта. Также задаётся в секундах или миллисекундах |
| animation-iteration-count | Количество повторов (итерации) анимации (infinite - бесконечно, или можно задать простое число без единиц измерения) |
| animation-direction | Направление анимации, последовательно, вспять или «туда-обратно» (normal - (по-умолчанию) анимация проигрывается от начала до конца и останавливается; alternate - проигрывается от начала до конца и в обратном направлении; alternate-reverse - проигрывается с конца до начала и обратно; reverse - анимация проигрывается с конца.) |
| animation-play-state | Управление проигрыванием анимации (paused (пауза), running (запуск) и т.д.). Можно применить на:hover или из функции JS при необходимости |
| animation-fill-mode | Состояние элемента до и после воспроизведения анимации. Например, значение backwards позволяет вернуть все свойства к исходному состоянию сразу после применения анимации |
Чаще всего опытные разработчики не пишут все эти свойства по отдельности, а используют краткую запись и структура её такова:
animation: (1. animation-name - название) (2. animation-duration - продолжительность) (3. animation-timing-function динамика движения) (4. animation-delay - пауза перед стартом) (5. animation-iteration-count - количество выполнений) (6. animation-direction - направление)
Animation: animationname 2s linear 1s infinite reverse
Из примера мы видим, что мы обращаемся к блоку @keyframes animationname, задаём продолжительность выполнения анимации 2 секунды, динамика линейная, пауза перед запуском составляет 1 секунду, повторяется анимация бесконечно и выполняется в обратную сторону.
Как я уже говорил ранее, начинается краткая запись со свойства «animation », после чего идут значения, последовательность которых лучше не забывать, чтобы не возникало путаницы при написании CSS анимации.
Однако, большинство этих свойств можно опустить, так как чаще всего их значения по-умолчанию вполне удовлетворят большинство задач по созданию анимации. Какие-то из них можно не писать, однако оставшиеся следует указывать в той последовательности, которую мы рассмотрели ранее. Вообще, для функционирования вашей анимации достаточно всего два параметра в вашем составном свойстве - название (animation-name ) и продолжительность (animation-duration ).
Загрузка...
