Skip to content

Instantly share code, notes, and snippets.

@lgh06
Created October 9, 2015 08:26
Show Gist options
  • Save lgh06/a2dbb5a9e002f1f7b9ca to your computer and use it in GitHub Desktop.
Save lgh06/a2dbb5a9e002f1f7b9ca to your computer and use it in GitHub Desktop.
#rotate(@deg){
transform: rotate(@deg);
}
@myWiggle: {
10% { #rotate(14deg); }
100% { #rotate(0deg); }
};
#doKeyFrames(@name; @frames) {
@keyframes @name {
@frames();
}
}
#doKeyFrames(wiggle; @myWiggle);
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1));
// next iteration
#doKeyFrames(~'wiggle-@{counter}'; @myWiggle); // code for each iteration
}
.loop(5); // launch the loop
@keyframes wiggle {
10% {
transform: rotate(14deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes wiggle-1 {
10% {
transform: rotate(14deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes wiggle-2 {
10% {
transform: rotate(14deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes wiggle-3 {
10% {
transform: rotate(14deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes wiggle-4 {
10% {
transform: rotate(14deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes wiggle-5 {
10% {
transform: rotate(14deg);
}
100% {
transform: rotate(0deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment