This is the SCSS used to run the vertical carousel on the landing page of raycocopiers.com. At this moment, it requires Compass. Hoping to rewrite it to be a lot more agnostic for future use.

compassless-vertical-carousel.scss

// Animation Specfic stuff related to carousel
// All of the following mixins were built by me
// so... blame me if they don't work
//
// This file is not repsonsive. I am working on that right, in a project
// 
// This file does not rely on any other libraries to work. Only SASS

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

@mixin animation-name($name){
  animation-name: $name;
  -webkit-animation-name: $name;
}

@mixin animation-duration($duration){
  animation-duration: $duration;
  -webkit-animation-duration: $duration;
}

@mixin animation-delay($delay){
  animation-delay: $delay;
  -webit-animation-delay: $delay;
}

@mixin animation-timing-function($function){
  animation-timing-function: $function;
  -webkit-animation-timing-function: $function;
}

@mixin animation-iteration-count($count){
  animation-iteration-count: $count;
  -webkit-animation-iteration-count: $count;
}

@mixin translateY($amount){
	transform: translateY($amount);
	-webkit-transform: translateY($amount);
	-moz-transform: translateY($amount);
}

// Declare the animation within a mixin, since I have to apply it to multiple classes.
@mixin carousel {
	@include animation-name(cycle-images);
	@include animation-duration(15s);
	@include animation-timing-function(ease-in-out);
	@include animation-iteration-count(infinite);
}

@include keyframes(cycle-images)
{
	//Starting at 10% allows for pause for last image and to first displayed image
	10%, 35% {
		@include translateY(-0); // start on first image
	}

	// 5% gap(from 35% to 40%) sets speed to move first image out and second up into place
	40%, 65% {
		@include translateY(-360px); // move second image into place
	}

	// Stopping the animation at 100% allows for clean transition to first image at end
	70%, 100% {
		@include translateY(-718px); // move third image up into place
	}
}

.carousel {
	//border: 1px solid rgba(0,0,0,0.5); //used to display image box
	height: 17em;
	overflow: hidden;
}

.image > img {
	@include carousel;
}
// This resets margin of figure element.
// Normalize sets this to margin: 1em 40px;
figure {
	margin: 0;
}

.img-one > figcaption {
	padding-bottom: 5.75em; // Set per your img sizes and needs
	@include carousel;
}

.img-two > figcaption {
	padding-bottom: 5.75em; // Set per your img sizes and needs
	@include carousel;
}

.img-three > figcaption {
	padding-bottom: 7.75em; // Set per your img sizes and needs
	@include carousel;
}

vertical-carousel.scss

/** Animation Specfic stuff related to carousel
  * All of the following mixins were built by me
  * so... blame me if they don't work.
  * 
  * This file relies on Compass to work
  **/
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

@mixin animation-name($name){
  $name: unquote($name);
  @include experimental(animation-name, $name, -moz, -webkit, -o, not -ms, not -khtml, official);
}

@mixin animation-duration($duration){
  $duration: unquote($duration);
  @include experimental(animation-duration, $duration, -moz, -webkit, -o, not -ms, not -khtml, official);
}

@mixin animation-delay($delay){
  $delay: unquote($delay);
  @include experimental(animation-delay, $delay, -moz, -webkit, -o, not -ms, not -khtml, official);
}

@mixin animation-timing-function($function){
  $function: unquote($function);
  @include experimental(animation-timing-function, $function, -moz, -webkit, -o, not -ms, not -khtml, official);
}

@mixin animation-iteration-count($count){
  $count: unquote($count);
  @include experimental(animation-iteration-count, $count, -moz, -webkit, -o, not -ms, not -khtml, official);
}

// Declare the animation within a mixin, since I have to apply it to multiple classes.
@mixin carousel {
	@include animation-name(cycle-images);
	@include animation-duration(15s);
	@include animation-timing-function(ease-in-out);
	@include animation-iteration-count(infinite);
}

@include keyframes(cycle-images)
{
	//Starting at 10% allows for pause for last image and to first displayed image
	10%, 35% {
		@include transform2d(translateY(-0)); // start on first image
	}

	// 5% gap(from 35% to 40%) sets speed to move first image out and second up into place
	40%, 65% {
		@include transform2d(translateY(-330px)); // move second image into place
	}

	// Stopping the animation at 100% allows for clean transition to first image at end
	70%, 100% {
		@include transform2d(translateY(-630px)); // move third image up into place
	}
}

.carousel {
	// border: 1px solid rgba(0,0,0,0.5); //used to display image box
	height: 15em;
	overflow: hidden;
}

.image >img {
	@include carousel;
	padding-bottom: .5em;
}

.img-one > figcaption {
	padding-bottom: 7.75em;
	@include carousel;
}

.img-two > figcaption {
	padding-bottom: 7.75em;
	@include carousel;
}

.img-three > figcaption {
	padding-bottom: 7.75em;
	@include carousel;
}