Вы здесь: Главная » CSS » CSS анимация » Анимация html-элементов с помощью Magic Animations CSS

Анимация html-элементов с помощью Magic Animations CSS

Magic Animations CSS, или просто Magic.css – отличный набор CSS-анимаций, который подойдёт для любых веб-проектов. Он в чем-то похож на Animate.css, однако содержит иной пакет анимаций. За пару минут вы можете добавить анимацию для любого html-элемента, используя css-файл magic.css и нужные классы. Также есть поддержка для JavaScript. На момент написания статьи доступна версия 1.4, которую можно найти на  на Github или сразу скачать magic.css.

Подключение Magic Animations CSS

Поскольку Magic Animations CSS - это библиотека классов для анимации, собранная в одном css-файле, то и подключить вы ее можете, как обычный css-файл в блоке <head> после скачивания:

На CDN пока доступна версия 1.1. Вставить ее в код можно так:

Можно также загрузить css-файл с официальной страницы проекта:

Загрузка пакетов с npm или yarn для использования с React.js, Angular, Vue.js:

Доступные классы анимации в Magic Animations CSS

Ниже представлены группы эффектов с названием классов для анимации.

Группа анимаций Классы анимации
Magic Effects magic, twisterInDown, twisterInUp, swap
Bling puffIn, puffOut, vanishIn, vanishOut
Static Effects openDownLeft, openDownRight, openUpLeft, openUpRight, openDownLeftReturn, openDownRightReturn, openUpLeftReturn, openUpRightReturn
Static Effects Out openDownLeftOut, openDownRightOut, openUpLeftOut, openUpRightOut
Perspective perspectiveDown, perspectiveUp, perspectiveLeft, perspectiveRight, perspectiveDownReturn, perspectiveUpReturn, perspectiveLeftReturn, perspectiveRightReturn
Rotate rotateDown, rotateUp, rotateLeft, rotateRight
Slide slideDown, slideUp, slideLeft, slideRight, slideDownReturn, slideUpReturn, slideLeftReturn, slideRightReturn
Math swashOut, swashIn, foolishIn, holeOut
Tin tinRightOut, tinLeftOut, tinUpOut, tinDownOut, tinRightIn, tinLeftIn, tinUpIn, tinDownIn
Bomb bombRightOut, bombLeftOut
Boing boingInUp, boingOutDown
On the Space spaceOutUp, spaceOutRight, spaceOutDown, spaceOutLeft, spaceInUp, spaceInRight, spaceInDown, spaceInLeft

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

See the Pen Guide to CSS Animations - Magic Animation CSS library by Elen (@ambassador) on CodePen.0

Разметка html-файла

Для того чтобы использовать CSS-анимации из magic.css, необходимо задать для нужного элемента 2 класса: magictime для проигрывания анимации в течение 1 секунды и любой из перечисленных в таблице выше, например openUpRightReturn.

Анимация на html-странице будет запущена сразу после загрузки файла.

Однако следует также учитывать, что в magic.css не предусмотрены классы для задержки анимации, как в Animate.css или для ее замедления/ускорения. Поэтому для того, чтобы анимация разных блоков запускалась не одновременно, а с некоторой задержкой, нужно самостоятельно указать для соответствующих элементов свойство animation-delay: 2s или с другим значением.

Еще один момент связан с тем, что для элементов с анимацией поворота, например, начальное значение анимации - это расположение элемента в повернутом состоянии. Выглядит вообще-то не очень красиво. Поэтому для родительского элемента имеет смысл задать свойство overflow: hidden, чтобы скрыть первоначальное положение анимированного блока.

Все эти моменты были использованы в примере ниже. Посмотрите html-разметку и код css, чтобы понять, как это работает.

See the Pen Magic Animation CSS example by Elen (@ambassador) on CodePen.0

Для того чтобы изменить скорость воспроизведения анимации, вы можете переписать свойство animation-duration для класса magictime:

Использование Magic Animations CSS в JavaScript и jQuery

В описании проекта на Github предлагается такое использование magic.css в JavaScript

Если вы хотите загрузить анимацию через определенное время, вы можете использовать метод setTimeout():

В том случае, если нужно загрузить анимацию через определенное время, причем с бесконечным циклом, вы можете использовать метод setInterval():

С помощью jQuery при наведении на элемент мы можем добавить для него анимацию, используя обработчик события hover:

Сначала добавьте класс magictime, а затем желаемый класс анимации вместо puffIn.

Если вы хотите загрузить анимацию через определенное время, вы можете использовать этот пример:

Можно использовать setInterval() для многократного или бесконечного запуска анимации:

Кстати, для запуска бесконечной анимации можно использовать свойство animation-iteration-count: infinite.

В заключение

А в заключение хотелось бы сказать не об анимациях, а о других проектах, которые вы можете найти на сайте создателей Magic Animations CSS - это CSS Gradient Generator (генератор  градиента), CSS Box shadow Generator (генератор теней для блоков) и YaPalette Colors (палитра цветов), которые могут вам помочь при верстке html-страниц.

Проекты на minimamente.com

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *