Description
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
istrue
,.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;