Staggered animations with SASS

There are 4 comments.

See the Pen Staggered animation using SASS / Compass by Jens Ahrengot Boddum (@Ahrengot) on CodePen

Here is the SASS code to achieve the staggered effect.

The magic happens in the loop between line 19-24 as highlighted below.

What this loop does is selecting li:nth-child(1) through li:nth-child(36) and delays the animation by 0.1 second for each child. The backgorund: hsl(); stuff is just to create the rainbow effect so you can tell the elements apart, but it doesn’t have anything to do with the animation itself.


@include "compass/css3";

html { background: #222; font-size: 16px; } 

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  width: 100%;
  height: 2.5em;
  
  @extend .animated;
  @include experimental(animation-name, fadeInUpBig);
  
  @for $i from 1 through 36 {
		&:nth-child(#{$i}) {
      background: hsl($i * 10, 60%, 50%);
			@include experimental(animation-delay, #{$i * 0.1}s); 
		}
	}
}

// Animation code based on animate.css (http://daneden.me/animate/)
.animated {
  @include experimental(animation-fill-mode, both);
  @include experimental(animation-duration, 0.7s);
}

@-webkit-keyframes fadeInUpBig {
	0% {
		opacity: 0;
		-webkit-transform: translateY(1000px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInUpBig {
	0% {
		opacity: 0;
		-moz-transform: translateY(1000px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInUpBig {
	0% {
		opacity: 0;
		-o-transform: translateY(1000px);
	}
	
	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInUpBig {
	0% {
		opacity: 0;
		transform: translateY(1000px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
  • Christian Rochford

    Nice post! Haven’t tried loops in Sass until now, look forward to playing with it.

    • http://ahrengot.com/ Jens Ahrengot Boddum

      Yeah it took me a while too, but they’re really handy for things like this.

  • http://www.couponrani.com goibibo coupons

    Dang, it’s actually a really good small bit of write down which I have face about drawn out original. Make simultaneously make a trip to this websites.

  • http://opus-one.com/site PKnrvnPRE

    buy valium next day delivery can buy valium hong kong – valium costa rica pharmacy