Vendor prefixes for CSS3 animations using SCSS


As new CSS3 features get released, browsers can implement those features before they become completely stabilised.

The current list of browser prefixes are

-moz- /* Firefox */
-webkit- /* Safari, Chrome, Android, iOS */
-o- /* Opera */
-ms- /* Internet Explorer */

So if I wanted to create a flyIn effect for an image, I’d need to add vendor prefixes for

For not that much code initially, the vendor prefixes required would blow out the size of the final CSS. Not to mention making errors far more likely.

Using Sass (with the SCSS syntax), we can define mixins to generate all the vendor prefixes for our CSS code.

First up, define a general vendor prefixer

https://gist.github.com/magician11/586dc9f94d131a067b81

and then define a mixin for the keyframes

https://gist.github.com/magician11/135d4f2cfffea828c828

Which then keeps my SCSS code really simple for my AngularJS animations.

https://gist.github.com/magician11/27602354395a2a2196df

To see a working demo of this flyIn, I’m using it for my profile pic on my landing page.


Leave a Reply

Your email address will not be published.