CSS is one of the easiest ways to build animation in our project. We can use key-frames and transition and added with other properties which owned CSS. But, how great CSS can we use for our project ?
CSS transitions and animations are ideal to use in a simple animation and self-contained states for UI elements. CSS is well-defined state transitions. We can implement for loading animations or looping animations, like a navigation menu from the side, showing a tooltip etc. Animation can be implemented in state of element on :hover, :focus, :active, :visited and other.
CSS is one of a great potential for performance because of no need external library without much effort. When we needed a responsive state, CSS can reliable for it because we can adjust properties in media queries.
The easy way with offered by CSS has the following limitations, we must define entirely animation ahead, can’t separate transform properties in IE browser, and the limited access events.
- You’ll be chaining more than 3-ish animations in sequence
- The animation needs to change dynamically at a runtime
- Need to animate transform properties separately
- Physics or other complex easing structures are required
When you’re building a game or drawing to an HTML canvas, you can use requestAnimationFrame directly when you want to orchestrate an entire scene by hand.
Another way to create animations in our product, we can use SVG. SVG is a shorthand from Scalable Vector Graphics used to define vector-based graphics for the Web. SVG defines the graphics in XML format, every element and every attribute in SVG files can be animated. Accordingly, SVG is the best way to use on animated illustrations, icons, infographics, data visual with a complex animation.
SVG has shape morphing and motion along a path, responsive by nature and potential for tiny file sizes.
CSS is declarative (the whole animation is known ahead of time). CSS animations with transform and opacity won’t be impacted by the main thread
JS is imperative (browser only really aware of the current frame). Hardware acceleration isn’t automatic.
SVG & Hardware Acceleration not all browsers support it. Good performance in general without it though.
Please feel free to visit at Medium 🙂
Val Head. WebConf.asia 2018. Choose your (Web) animation adventure. https://noti.st/valhead/L1xkMT/choose-your-web-animation-adventure#s3di7Vb
Paul Lewis. Animations. https://developers.google.com/web/fundamentals/design-and-ux/animations/