/* --------------------------------------------------------------
TRANSITION DELAY - LESS LOOP
-------------------------------------------------------------- */
.generate-columns(7);
.generate-columns(@n, @i: 1) when (@i =< @n) {
.delay-@{i} {
-webkit-animation-duration: (@i) + 0s;
animation-duration: (@i) + 0s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-delay: (@i / 2) + 0s;
-webkit-animation-delay: (@i / 2) + 0s;
}
.generate-columns(@n, (@i + 1));
}
This snippet creates a several delay classes, separated by 0.75 seconds.
I use it to animate several flexbox to appear one at a time
I use it to animate several flexbox to appear one at a time
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.