feyvik

What's new in Animate.css

Favour Vivian Woka's photo
Favour Vivian Woka
·

2 min read

Working on a project and using Animate.css, I discovered that Animate.css has upgraded from v3 to v4.

What is Animate.css?

Animate.css is a built-in ready to use library that comes with dozens of cross-browser animations. It is very easy to implement when used and it has over 50 different animation effects like bounce, fadeIn, fadeOut, flash and lot more. All this animation effects works consistently on all browsers that support CSS3 animation.

Animate.css is one of the best animation library we can use to make our website attractive and fun for users visiting. We can apply this animations in our project sections like: header, footer, or on the text, pictures, buttons and many more.

What is new?

Animate.css has upgraded from v3 to v4 and this new version brought some improvement, improved animations, and new animation and it have added some prefix for all of the Animate.css classes - defaulting to animate__ - so a direct migration is no longer possible.

If you are using the older version of animate.css all you need to do is to migrate from:

animate.min.css

To:

animate.compat.css

Note that the older version(3.x and under)brought the animate__ prefix and this new version(v4)brought no prefix at all.

For those of us using Animate.css CDN all we need to do is to change the cdn link or update the link on our HTML:

From:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
  />
</head>

To:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"
  />
</head>

And for those using a bundler just change the Import or update it.

From:

import 'animate.min.css';

To:

import 'animate.compat.css';

But if you are using the Animate.css in a new project, it's highly recommended to use the default prefixed version.

Conclusion

With Animate.css, we can easily animate any element in our website with one line of code. Remember to use it only when it is needed or where it is needed and not for the fun of using animation because animation are used to attract the attention of users visiting our websites.

Resource-