JavaScript animations as a fallback for CSS animations
We might have to create animations for browsers that do not have support for CSS animations and transitions yet. It might be part of a project's requirements.
In this case, we can still use JavaScript animations as a fallback for CSS animations. However, what if we add a CSS animation and a JavaScript animation for the same element and the browser has support for CSS animations?
We don't want to display the same animation twice, so we will use Modernizr, a JavaScript library that detects HTML5 and CSS3 features in the user's browser.
Note
Learn more about Modernizr at http://modernizr.com.
In such cases, we will trigger the JavaScript animations only if CSS transitions are not supported by the browser.
Here, we have a sample of the ngIf animation that uses a transition if the browser has support for CSS transitions; otherwise, it triggers the JavaScript animation fallback with the same animation effect, shown as follows:
<...
