Animations

Animations are also taken into account.
They are his own kind of component so all animations comes with a shared set of classes to alter them.

.a-animationName{}

 .a-fadeIn{}

Animated status:

Animations by default should be disabled unless the activation status is provided.
Without this class no animation will run.

.a-animationName.is–animated{}

 .a-fadeIn.is--animated{}

This status is very powerfull & comes with his own set of modifiers

Animated delay:

How much time needs to happen before the animation starts.
Measured in tenths of a second It goes from 0.1s as “1” to 2s as “20”

.is–animated.–delay-value{}

 .is--animated.--delay-2 {
     animation-delay: 0.2s;
 }

Animated iterations:

Amount of times an animation needs to repeat itself Allowed values are “infinite” or a range from 1 to 20

.is–animated.–iterations__value{}

 .is--animated.--iterations-2 {
     animation-iteration-count: 2;
 }

Example

njk
<div class="flx --flxColumn">
 TODO: animation example
</div>
html compiled
<div class="flx --flxColumn">TODO: animation example</div>