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.



Animated status:

Animations by default should be disabled unless the activation status is provided.
Without this class no animation will run.–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-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-2 {
     animation-iteration-count: 2;


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