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.
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.