Easy CSS3 animations with Animate.css
Chapters
Resources and conclusion
This part of our tutorial hold key resources so that you can read more and learn more and do all the things that are CSS animations. One thing we would like to point is to keep in touch with all the W3C updates from their website.
Resources
http://www.w3.org/TR/css3-animations/ [CSS animation draft]
https://github.com/morr/jquery.appear [jQuery Appear plugin]
https://github.com/daneden/animate.css [Animate.css framework]
https://www.youtube.com/watch?v=1_0L0FgPuSE [Video explaining how to use animate.css]
Conclusion
Even though CSS animations are pretty new to web and modern browser supports it, CSS3 animation is still a working draft and is not a standard just yet. But this can soon change.
Also note that Internet explorer below version 10 does not support any of what we learnt in this tutorial. But this should not stop you from using them.
Web is changing and so are browsers. CSS animations are fast compared to what we can do with javascript. This is one of the top most reason to use then over what javascript can do for you.
There are heaps of other resources if you get stuck. Be sure to not stop learning.
Description
In this tutorial we will try to understand how to do CSS3 animations without much effort.
This tutorial is divided into four parts
- Key things to know about CSS3 animations
- Animations with bare minimum CSS3 code
- jQuery magic fire animation.css animation plus adding animation to element when it is visible on browser viewport
- Resources and conclusion
This tutorial will be followed by a quick quiz to check on your knowledge.
Environment
A computer with a code editor and an installed modern browser. This tutorial is not targeted at IE9 or below users/
Prerequisites
Basic understanding of HTML, jQuery and CSS.
Audience
Developers who want to learn how to apply pure CSS3 animation effects without any knowledge on this subject.
Learning Objectives
You will be introduced to CSS3 animations with keyframes
You will also use animation framework called animate.css
You will also learn how to apply CSS3 animation with help of jQuery
Author: Subject Coach
Added on: 3rd Dec 2014
You must be logged in as Student to ask a Question.
None just yet!