Skip to content

Instantly share code, notes, and snippets.

@mfd
Last active November 16, 2016 18:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mfd/ad6ef3821aeca97c598cedc52f6d1b7f to your computer and use it in GitHub Desktop.
Save mfd/ad6ef3821aeca97c598cedc52f6d1b7f to your computer and use it in GitHub Desktop.
LESS | items delay animation mixin
.each-anim(@tag, @animationDuration: 1s, @animationDelay: 0.1s ) {
.@{tag} {
opacity: 0;
.rotateX(-90deg); //transform: rotateX(-90deg);
.transition(all 0.5s ease-out); //anim
}
// after load -> $('body').addClass('loaded');
body.loaded & .@{tag} {
opacity: 1;
transform: none;
}
//animation delay
body.loaded & .@{tag} {
.animation (50);
.animation(@n, @i: 1) when (@i =< @n) {
&:nth-child(@{i}) {
.transition-delay(@i * @animationDelay);
//z-index: @i;
z-index: 0;
}
.animation(@n, (@i + 1));
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment