Stylet offers animation alongside designs. With Stylet you can create simple animations that you can add to your website to give it a nice look. We are going to be looking at the animations that Stylet V1.0.0 has to offer and how we can use them to create awesome, good looking, attractive components for our websites.If you want to use only Stylet Animations, you can download it seperately or include it through it's CDN, Read More.

Glow animation

We can add a glow animation using Stylet. Let's look at some examples:

Hello i am glowing fast!

Hello world!

The glow animation works by adding glow-{num}, where num < 11

glow-1 is the fastest and the slowest is glow-10

With the Glow animation, you can add easy effects in your site.

Fade Away animation

i fade away

fading away!

The fade-away animation works by adding fade-away-{num}, where num < 11. It works by incrementing 1 second each, meaning each class name has a difference of 1 second. Meaning fade-away-1 fades in a second and fade-away-10 fades in 10 seconds.

fade-away-1 is the fastest and the slowest is fade-away-10

With the Fade away animation, you can add easy effects in your site.

Wobble in animation

wobbling in

wobbling in

The wobble-in animation works by adding wobble-in-{num}, where num < 11. It works by incrementing 1 second each, meaning each class name has a difference of 1 second. Meaning wobble-in-1 fades in a second and wobble-in-10 fades in 10 seconds.

wobble-in-1 is the fastest and the slowest is wobble-in-10

With the Wobble in animation, you can add easy effects in your site.

Glow in animation

The glow-in animation is the opposite of the fade-away, it glows in the element, to see the effect we need to refresh the page.

glow in

glow in

The glow-in animation works by adding glow-in-{num}, where num < 11. It works by incrementing 1 second each, meaning each class name has a difference of 1 second. Meaning glow-in-1 fades in a second and glow-in-10 fades in 10 seconds.

glow-in-1 is the fastest and the slowest is glow-in-10

With the glow in animation, you can add easy effects in your site.

Slide animation

With Stylet you can create sliding effects or animation, this effect can be useful in headers and you can use them as scroll and show.
Stylet offers four types of slide effects or animations:

• Slide left
• Slide right
• Slide top
• Slide bottom

To see their effects, we have to refresh this section

slide from the left

slide from the right

slide from the top

slide from the bottom

Zoom animation

With Stylet, we can create a zoom animation to an element, the zoom element zooms in an element that has the class name zoom-{num}, where num < 10

when they try to hold me i go zoom, zoom, zoom

when they try to hold me i go zoom, zoom, zoom

Loaders

Stylet has pre-defined loaders that we can use if needed. They come with Stylet's standard colors E.g. black-loader-spin,white-loader-spin and so on

Float animation

i am floating

i am also floating

We are all floaters (lol)

Text animation (effects)

We can rotate or flip text using the text animation in Stylet. You can add these classes to see the effect, text-rotate-90, text-rotate-180, text-rotate-270, text-flip-horizontal, text-flip-vertical and text-flip-both

Spin animation

The spin animation makes the element it's being applied on to spin, 360. It spins in second by incrementing and uses a class name syntax of spin-{num} where num < 11.
We can also add the animation when the element is hovered upon. To add the hover effect of the spin, it's syntax is spin-{num}-hover

Shake animation

i am shaking!!

i am shaking also bro!