Transition Delay - Cycle in LESS

/* -------------------------------------------------------------- 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

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.