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> после скачивания:
| 1 2 3 4 5 6 | <head> <!-- Несжатый файл --> <link rel="stylesheet" href="css/magic.css"> <!-- или минифицированный файл --> <link rel="stylesheet" href="css/magic.min.css"> </head> |
На CDN пока доступна версия 1.1. Вставить ее в код можно так:
| 1 2 3 4 5 | <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magic/1.1.0/magic.min.css" integrity="sha512-5KJYgPF7pe0cdJAg/9X6UdHE5cN9fqjjIi8ASyIqlcsKZdHVouNRcweLGEdtrIJJxMn+GqwJBjAurCjWOvEdJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> |
Можно также загрузить css-файл с официальной страницы проекта:
| 1 2 3 4 5 6 | <head> <!-- Несжатый файл --> <link rel="stylesheet" href="https://www.minimamente.com/project/magic/dist-test/magic.css"> <!-- или минифицированный файл --> <link rel="stylesheet" href="https://www.minimamente.com/project/magic/dist-test/magic.min.css"> </head> |
Загрузка пакетов с npm или yarn для использования с React.js, Angular, Vue.js:
| 1 2 3 | npm i magic.css yarn add magic.css |
Доступные классы анимации в 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.
Разметка html-файла
Для того чтобы использовать CSS-анимации из magic.css, необходимо задать для нужного элемента 2 класса: magictime для проигрывания анимации в течение 1 секунды и любой из перечисленных в таблице выше, например openUpRightReturn.
| 1 2 3 4 5 | <div class="magictime openUpRightReturn"> <i class="bi bi-file-earmark-image"></i> <h4>Flawless Design</h4> <p>Leverage has incredible ratings on the beauty and organization of the source code. It's perfect!</p> </div |
Анимация на html-странице будет запущена сразу после загрузки файла.
Однако следует также учитывать, что в magic.css не предусмотрены классы для задержки анимации, как в Animate.css или для ее замедления/ускорения. Поэтому для того, чтобы анимация разных блоков запускалась не одновременно, а с некоторой задержкой, нужно самостоятельно указать для соответствующих элементов свойство animation-delay: 2s или с другим значением.
Еще один момент связан с тем, что для элементов с анимацией поворота, например, начальное значение анимации - это расположение элемента в повернутом состоянии. Выглядит вообще-то не очень красиво. Поэтому для родительского элемента имеет смысл задать свойство overflow: hidden, чтобы скрыть первоначальное положение анимированного блока.
Все эти моменты были использованы в примере ниже. Посмотрите html-разметку и код css, чтобы понять, как это работает.
See the Pen Magic Animation CSS example by Elen (@ambassador) on CodePen.
Для того чтобы изменить скорость воспроизведения анимации, вы можете переписать свойство animation-duration для класса magictime:
| 1 2 3 4 | .magictime { -webkit-animation-duration: 3s; animation-duration: 3s; } |
Использование Magic Animations CSS в JavaScript и jQuery
В описании проекта на Github предлагается такое использование magic.css в JavaScript
| 1 2 | const selector = document.querySelector('.yourdiv') selector.classList.add('magictime', 'puffIn') |
Если вы хотите загрузить анимацию через определенное время, вы можете использовать метод setTimeout():
| 1 2 3 4 5 | function myFunction() { const selector = document.querySelector('.yourdiv') selector.classList.add('magictime', 'puffIn') } setTimeout(myFunction, 5000); |
В том случае, если нужно загрузить анимацию через определенное время, причем с бесконечным циклом, вы можете использовать метод setInterval():
| 1 2 3 4 5 | function myFunction() { const selector = document.querySelector('.yourdiv') selector.classList.add('magictime', 'puffIn') } setInterval(myFunction, 3000); |
С помощью jQuery при наведении на элемент мы можем добавить для него анимацию, используя обработчик события hover:
| 1 2 3 | $('.yourdiv').hover(function () { $(this).addClass('magictime puffIn'); }); |
Сначала добавьте класс magictime, а затем желаемый класс анимации вместо puffIn.
Если вы хотите загрузить анимацию через определенное время, вы можете использовать этот пример:
| 1 2 3 | setTimeout(function(){ $('.yourdiv').addClass('magictime puffIn'); }, 5000); |
Можно использовать setInterval() для многократного или бесконечного запуска анимации:
| 1 2 3 | setInterval(function(){ $('.yourdiv').toggleClass('magictime swashIn'); }, 3000 ); |
Кстати, для запуска бесконечной анимации можно использовать свойство animation-iteration-count: infinite.
| 1 2 3 4 | .yourdiv { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } |
В заключение
А в заключение хотелось бы сказать не об анимациях, а о других проектах, которые вы можете найти на сайте создателей Magic Animations CSS - это CSS Gradient Generator (генератор градиента), CSS Box shadow Generator (генератор теней для блоков) и YaPalette Colors (палитра цветов), которые могут вам помочь при верстке html-страниц.
