Magical.css is a library of ready-to-use, cross-browser
animations for use
in your web
projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
Installation and Usage
Installing
Add it directly to your webpage using a CDN:
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/jaiminmalaviya/magical-css-library/magical.min.css"
/>
</head>
Basic usage
After installing Magical.css, add the class animate__animated to an
element, along
with any
of the animation names (don't forget the
animate__
prefix!):
<h1 class="animate__animated animate__bounce">An animated element</h1>
That's it! You've got a CSS animated element. Super!
Using @keyframes
Even though the library provides you a few helper classes like the
animated class to
get you
up running quickly, you can directly use the provided animations
keyframes. This
provides a
flexible way to use Magical.css with your current projects without having to
refactor your HTML
code.
Example:
.my-element {
display: inline-block;
margin: 0 0.5rem;
animation: bounce; /* referring directly to the animation's @keyframe declaration */
animation-duration: 2s; /* don't forget to set a duration! */
}
Be aware that some animations are dependent on the animation-timing
property set on
the
animation's class. Changing or not declaring it might lead to unexpected results.
Utility Classes
Magical.css comes packed with a few utility classes to simplify its use.
Delay classes
You can add delays directly on the element's class attribute, just like this:
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
Magical.css provides the following delays:
| Class name |
Default delay time |
animate__delay-2s |
2s |
animate__delay-3s |
3s |
animate__delay-4s |
4s |
animate__delay-5s |
5s |
The provided delays are from 1 to 5 seconds. You can customize them setting the
--animate-delay property to a longer or a shorter duration:
/* All delay classes will take 2x longer to start */
:root {
--animate-delay: 2s;
}
/* All delay classes will take half the time to start */
:root {
--animate-delay: 0.5s;
}
Slow, slower, fast, and Faster classes
You can control the speed of the animation by adding these classes, as below:
<div class="animate__animated animate__bounce animate__faster">Example</div>
| Class name |
Default speed time |
animate__slow |
2s |
animate__slower |
3s |
animate__fast |
800ms |
animate__faster |
500ms |
The animate__animated class has a default speed of 1s. You
can also
customize
the animations duration through the --animate-duration property,
globally or
locally. This
will affect both the animations and the utility classes. Example:
/* All animations will take twice as long to finish */
:root {
--animate-duration: 2s;
}
/* Only this element will take half the time to finish */
.my-element {
--animate-duration: 0.5s;
}
Notice that some animations have a duration of less than 1 second. As we used the CSS
calc()
function, setting the duration through the --animation-duration
property will
respect these
ratios. So, when you change the global duration, all the animations will respond to
that change!
Repeating classes
You can control the iteration count of the animation by adding these classes, like
below:
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
| Class Name |
Default iteration count |
animate__repeat-1 |
1 |
animate__repeat-2 |
2 |
animate__repeat-3 |
3 |
animate__infinite |
infinite |
As with the delay and speed classes, the animate__repeat class is based
on the
--animate-repeat property and has a default iteration count of
1. You
can
customize them by setting the --animate-repeat property to a longer or
a shorter
value:
/* The element will repeat the animation 2x
It's better to set this property locally and not globally or
you might end up with a messy situation */
.my-element {
--animate-repeat: 2;
}
Notice that animate__infinite doesn't use any custom property, and
changes to
--animate-repeat will have no effect.
