Created
February 12, 2016 09:17
-
-
Save vajkri/26a683702e02aa656023 to your computer and use it in GitHub Desktop.
CSS Stagger delay mixin (both for animation & transition)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Stagger delay mixin, takes 4 parameters: | |
| 1) Nr of children, that need to stagger | |
| 2) Initial delay of animation / transition | |
| 3) Delay between each child's animation / transition | |
| 4) Type of stagger. Default is "animation", also takes "transition" | |
| */ | |
| @mixin stagger-delay($i, $initial-delay, $stagger-delay, $type: animation) { | |
| @while $i > 0 { | |
| &:nth-of-type(#{$i}) { | |
| #{$type}-delay: $initial-delay + $stagger-delay * $i; | |
| } | |
| $i: $i - 1; | |
| } | |
| } | |
| /* ************************************* */ | |
| /* *************** Usage *************** */ | |
| /* ************************************* */ | |
| /* ************* Animation ************* */ | |
| /* | |
| .foo { | |
| //...some code | |
| animation: some-animation 1s ease forwards; | |
| @include stagger-delay(4, 1s, 0.15s); | |
| } | |
| */ | |
| /* ************* Transition ************* */ | |
| /* | |
| .foo { | |
| //...some code | |
| transition: 400ms ease all; | |
| @include stagger-delay(4, 1s, 0.15s, transition); | |
| &:hover { | |
| //...some more code | |
| } | |
| } | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment