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

and then define a mixin for the keyframes

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

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.