0

Controlling CSS animations with Javascript

Share Button

Recently I been working on adding new features to my jQuery marquee plugin. I was trying to add CSS3 animation support to the plugin so it performs better as jQuery animate change the CSS property inside a loop to complete animations.

For example animating something using jQuery animate:

See the Pen wdcIl by Aamir Afridi (@aamirafridi) on CodePen

If you inspect the above green box in developer toolbar and than click it, you can see that jQuery changes the margin-left inside a timer i.e setInterval. To check the code, see this.

Coupled with a touch of JavaScript, CSS animations and transitions are able to accomplish hardware-accelerated animations and interactions more efficiently than most JavaScript libraries.

Many animations in your JS app will affect the performance and will make the animations slower and jerky. So why not use CSS3 animations where browser supports it and use jQuery animate as fallback? or better not to use animations at all where you can avoid so older browsers can perform well.

CSS3 Transition syntax

CSS transition example:

Detect CSS3 animations support

To detect if browser supports CSS3 animation is not simple especially because new CSS3 properties are prefixed by different vendors.

Here is the list:

Prefix Organisation
-ms- Microsoft
mso- Microsoft Office
-moz- Mozilla Foundation (Gecko-based browsers)
-o- Opera Software
-atsc- Advanced Television Standards Committee
-wap- The WAP Forum
-webkit- Safari (and other WebKit-based browsers)
-khtml- Konqueror browser

To check support for each CSS3 property (for example transition) for all these vendors is tricky but can be achieved using following script:

See the Pen Kvpjx by Aamir Afridi (@aamirafridi) on CodePen

You can also try this simple way to detect browser support for CSS3 transitions:

See the Pen lrdfk by Aamir Afridi (@aamirafridi) on CodePen

Now animating the green box used in above example using CSS3

I took the same example but this time instead of using jQuery.animate I will animate the green box using CSS3 transition property.

See the Pen LgDFx by Aamir Afridi (@aamirafridi) on CodePen

In this example we have used a cross browser callback method which will be fired when the animation finishes.

Now we can combine the above two ways of animating. First we will detect if CSS3 is supported than animate using CSS3 otherwise use jQuery.animate which works cross-browser.

See the Pen IiBHc by Aamir Afridi (@aamirafridi) on CodePen

Using transitions with Javascript & jQuery.animate as fallback for dynamic CSS values

Till now we learnt how to animate using CSS3 and use jQuery.animate as fallback. In some cases you need to calculate some value for animation in Javascript and than use it to animate the element. Following examples shows how to detect and than use CSS3 transitions with Javascript following by jQuery.animate as fallback:

See the Pen GcmHt by Aamir Afridi (@aamirafridi) on CodePen

Here is code which detects CSS animation support with comments

Using CSS3 Keyframes with Javascript

Keyframes are useful when you need to control pause/stop and resume animations. Lets see how can we detect if browser supports keyframe animations and how to control animations using Javascript:

See the Pen gzAdn by Aamir Afridi (@aamirafridi) on CodePen

In this example we detect weather browser supports CSS3 animation than create the keyframe animation and append it to head. We have created a unique animation Id so you can reuse the function for different elements. For a complete example check my jQuery marquee plugin.

Conclusion

This is just a start which will give you an idea how you can use CSS transitions and Keyframes animation with Javascript for dynamic values. Of course you can use different jQuery plugins which smoothly detect CSS3 support and manage the animation for you like jQuery.transit or jQuery animate enhanced. You can also check a powerful little tool for managing CSS animations called Animo.js.

Also there is a very good article written by Zach Saucier about controlling CSS3 animations with Javascript.

Useful links

Please suggest better ways of detecting CSS animations if you know any in comments section below.

Share Button
Copyright © 2017 — musings of Aamir Afridi