The days of childhood bring a lot of memories when you think about them. The food we ate, the games we played, the TV we watched- they all formed a very distinct childhood experience. The end result was the same though- they all brought us happiness. But we never noticed the effort that was put into these specific actions- the amount of work that went into them and how through the evolution of trying to make ourselves happy, we leaped so much in technology. Who would’ve thought when Walt Disney said “It’s kind of fun to do the impossible,” that the state of animation would be here- something that was once just deemed for entertainment, is now a major source of business for many?
The leap of technology that I previously talked about might be a stark difference for someone who fell asleep in the 1930s and woke up today but for us regular folk, it has only been natural. And if you just talk about the animation in the Web World, it didn’t quite arrive until 1987, when the GIF (Graphics Interchange Format) was introduced and primarily used for inducing a 3D illusion for a company’s logo. Then, Web Animation was pretty much the same for another ten years when Flash finally broke into the market. This resulted in rich websites that were interactive and overall, just beautiful. As you can see in the images below:
In a way, the properties afforded to us by CSS3 are also brilliant. It allows us to animate any CSS property (the background, the height, the width, opacity, etc.) with ease by using keyframes and sub-properties (animation-fill-mode, animation-iteration-count, animation-delay, etc.) but as stated above, it does not allow individual style attribute properties power to animate. And hence is best suited for simpler animations.
Now that everything is laid out, and you’ve chosen to use CSS Animations, here are a few best practices to follow if you want a truly seamless body of work:
- Do not change any other property besides Transform and Opacity (other properties require a lot of work from the browser while the two mentioned above can be done more efficiently without a re-render from the browser)
- Use Animation Choreography (use animation-delay to form an intricate order to things which would also help in avoiding lag in your animation.)
- Use a global multiplier (to test your animations in slow speed and then once everything looks fine, speed it up using the same multiplier)
- Test on multiple devices and from early on in development