Animate.css | CSS Animation basics and how to use Animate.css

In this video, we cover the basics of CSS animations and the minimum requirement needed to get your first animation working.

Rather than just showing plug and play, we'll dig into the source file to understand how it works and the different ways you can apply it.

With great animation powers also comes great responsibilities. Site performance should be preferred over a lot of candy animations. Transforms and Opacity are your friend and add either will-change or transformZ: 0 to the elements to create separate render layers to aid in performance. The more layers....the more memory and processing you use.

Demo code:

I recorded this late last year (I know it's now 2017). I've been busy learning React and attempting to build a Progressive Web App.

Hopefully, if you've read this far, and have watched the video, you will have noticed an error. In the demo header, I set the top, left, right and bottom to -50px, then I set initial scale to 1.2. This is wrong, they should all be set to 0px. Reason I did -50px is with Chrome, the edges of a blurred image aren't blurred, so you have to allow for this with the above method. Sorry, bad habbit and I recorded late at night so didn't realise I was doing it haha.

[premier]

Thank you very much for your hard work!