API: New #a.animated mixin definitions

[codeworksdev]

New definitions were added to the #a.animated shorthand mixin to allow for better syntax when defining CSS animation properties.

DEFINITIONS (5)

Note: By default, the animation-fill-mode CSS property is set by the @o_animateless_fill variable. Of course, you can easily override this value with #a.fill, if necessary.

DEFINITION 1

#a.animated() {
    .fill(@o_animateless_fill);
    .duration(a, @o_animateless_duration);
    .delay(a, 0s);
    .iterate(1);
    }

DEFINITION 2

#a.animated(@name) {
    .fill(@o_animateless_fill);
    .duration(a, @o_animateless_duration);
    .delay(a, 0s);
    .iterate(1);
    .animation(@name);
    }

DEFINITION 3

#a.animated(@name; @duration) {
    .fill(@o_animateless_fill);
    .duration(a, @duration);
    .delay(a, 0s);
    .iterate(1);
    .animation(@name);
    }

DEFINITION 4

#a.animated(@name; @duration; @delay) {
    .fill(@o_animateless_fill);
    .duration(a, @duration);
    .delay(a, @delay);
    .iterate(1);
    .animation(@name);
    }

DEFINITION 5

#a.animated(@name; @duration; @delay; @iterations) {
    .fill(@o_animateless_fill);
    .duration(a, @duration);
    .delay(a, @delay);
    .iterate(@iterations);
    .animation(@name);
    }