CSS Animation for Beginners

Visit Bookmark

As the age old Flash took back seat in web animations, CSS started prepping to take over the main stage. Reason being the need for a proper and powerful animation fabricating technique for websites, but why is animation so important?

As explained in this article, human brain is hardwired to pay attention to moving objects. This reminds me the example of those good old flashy ads. Time when every website used to flaunt glossy ads, during the 90s and early 2000s. Even today you can see ads using this special quality of human brain and nudge them into taking action on advertisements. That being said, doing animation is not the goal but doing it properly is. Creating animations with equal quality animation as of Flash takes effort. Check out few examples of Flash vs HTML/CSS Ads animations. To create stuff like these, you need to start with the basics.

With this article Rachel Cope from Thoughtbot explains the basics of CSS animations. Including the building blocks like Keyframes, Animation Properties, Shorthand etc.

Read the article and try out sample experiments with the help of the code shared along with the article to correctly understand the amazing capabilities of CSS animations.