Today I’ll introduce a animation “framework” for the Web. The web has evolved a lot since I first learn about web programming. In the past, you need to use javascript to move the elements pixel by pixel to render animation on the web. Now, with the help of CSS3, this has simplified a lot. But since different browsers has different pace of adoption of the CSS3, we have something called vendor prefix (-webkit, -moz etc), Which looks pretty ugly and bulky.
1 2 3 4 5 | -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease; |
In addition, the css3 syntax could be hard to understand and memorize for busy code monkeys. To solve this problem a cool developer consolidated some commonly used transition effects in a library, which we can use with zero-effort.
Animate.CSS
You can visit their project website or the github page to get the latest code. It’s pretty easy to use it, the library is simply a bunch of CSS classes.
First you need to download the code and include in your project, load the css in your HTML:
1 | <link rel="stylesheet" type="text/css" href="css/animate.min.css"> |
Thinking in CSS3 animation
Animation in CSS3 is declarative (well…css is declarations), meaning that you declare the duration, transition effects, property to animate, delay etc, in the CSS class. Then add to the DOM element as soon as you want the animation to start.
Hard-wire effect to the element in the HTML
Javascript is not required to make it work, for example you want your logo Fade-in when the webpage loaded, you can just add the 2 css class “animated” and “fadeIn” in the element, the animation will start once the element is loaded.
1 2 3 | <div class="header"> <img src="img/logo.png" class="animated fadeIn" alt="Coolest Web ever" /> </div> |
Dynamically animate an object
The below code use jQuery to handle add remove class
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="header"> <img id="logo" src="img/logo.png" class="invisible" alt="Coolest Web ever" /> </div> <style> .invisible{ visibility:hidden; } /* Add this class to the element to prevent it from displaying before the animation start. */ </style> <script> //1. remove the invisibility flag //2. add the animation $("#logo").removeClass("invisible").addClass("animated fadeIn"); </script> |
Control the timing
If you open the animate.css, You’ll see that there’s already default for the duration, delay. You can change that settings for each element individually. But if you arealso lazy like me, you can change the “animated” class (not modify the code, just override it). Here is my settings:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <link rel="stylesheet" type="text/css" href="css/animate.min.css"> <style> .animated{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: 1s; -webkit-animation-delay: .2s; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-duration: 1s; -moz-animation-delay: .2s; -moz-animation-timing-function: ease; -moz-animation-fill-mode: both; -ms-animation-duration: 1s; -ms-animation-delay: .2s; -ms-animation-timing-function: ease; -ms-animation-fill-mode: both; -o-animation-duration: 1s; -o-animation-delay: .2s; -o-animation-timing-function: ease; -o-animation-fill-mode: both; animation-duration: 1s; animation-delay: .2s; animation-timing-function: ease; animation-fill-mode: both; } </style> |
That’s it, Happy hacking!
