API: New shorthand mixins #46

The new shorthand mixins listed below provide an easy way to generate cross-browser CSS properties commonly used in animations and transitions.

SHORTHAND MIXINS

Note: These mixins use #a.vendor to ensure cross-browser CSS properties are generated.

#a.animation
#a.animations
#a.backface-visibility
#a.delay
#a.delay
#a.direction
#a.duration
#a.duration
#a.fill
#a.iterate
#a.timing
#a.timing
#a.transform
#a.transform-origin
#a.transition
#a.transitions

FOR EXAMPLE
You can create your own mixin to define one or more CSS properties with minimal effort:

.my_prefixed_mixin(@animation_name: none; @delay : 0s) {
   #a.animation(@animation_name);
   #a.delay(a, @delay);
   }

Assuming @o_animateless_prefixed is true, .my_prefixed_mixin(bounceIn) would generate:

-webkit-animation-name: bounceIn;
   -moz-animation-name: bounceIn;
    -ms-animation-name: bounceIn;
     -o-animation-name: bounceIn;
        animation-name: bounceIn;
-webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
     -o-animation-delay: 0s;
        animation-delay: 0s;

UNDERSCORED SHORTHAND MIXINS

Alternatively, you can use the underscored variants of the mixins listed above if you need to generate CSS properties for a specific vendor prefix only (defined by the @vendor variable).

#a._animation
#a._animations
#a._backface-visibility
#a._delay
#a._delay
#a._direction
#a._duration
#a._duration
#a._fill
#a._iterate
#a._timing
#a._timing
#a._transform
#a._transform-origin
#a._transition
#a._transitions

FOR EXAMPLE
You can create your own mixin and define @vendor before generating one or more CSS properties.

.my_webkit_mixin(@animation_name: none; @delay : 0s) {
   @vendor: -webkit-;
   #a._animation(@animation_name);
   #a._delay(a, @delay);
   }

Assuming .my_webkit_mixin(bounceIn), the above example would generate:

-webkit-animation-name: bounceIn;
-webkit-animation-delay: 0s;