Keyframe animations - with Bourbon, of course.

animations.scss

@include keyframes(floatIn) {
  from {
    margin-top: 15px;
  }
  to {
    margin-top: 0;
  }
}

@include keyframes(fadeIn) {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@include keyframes(growIn) {
  from {
    @include transform(scale(0.9));
  }
  to {
    @include transform(scale(1));
  }
}

@include keyframes(shakeIt) {
  93%, 95.5%, 98% {
    @include transform(rotate(-1deg));
  }
  93.5%, 96%, 98.5% {
    @include transform(rotate(0deg));
  }
  94%, 96.5%, 99% {
    @include transform(rotate(1deg));
  }
  94.5%, 97%, 99.5% {
    @include transform(rotate(0deg));
  }
  95%, 97.5%, 100% {
    @include transform(rotate(-1deg));
  }
}

// Slideshow ///////////////////////////////////////////////////////////////////
@include keyframes(count1st) {
  0%, 33.3%, 100% {
    opacity: 0;
  }
  3.33%,  29.97% {
    opacity: 1;
  }
}
@include keyframes(count2nd) { //+ 33.3
  0%, 33.3%, 66.6%, 100% {
    opacity: 0;
  }
  36.6%, 63.27% {
    opacity: 1;
  }
}
@include keyframes(count3rd) {
  0%, 66.6%, 100% {
    opacity: 0;
  }
  69.9%, 96.57% {
    opacity: 1;
  }
}

gistfile1.txt

p {
  @include animation(floatIn 1s);
}

.c-logo {
  @include animation(growIn 0.5s);
}

.c-hero {
  @include animation(fadeIn 1.5s);
}

.a-shakeit {
  @include animation-delay(3s);
  @include animation(shakeIt 10s infinite);
}

// Slideshow ///////////////////////////////////////////////////////////////////
.c-hero {
    @include clearfix;
    position: relative;

    img {
        @include inner-border;

        &:first-of-type {
            float:left;
        }
        &:not(:first-of-type) {
            position: absolute;
            right: 0;
        }
    }
    .a-count-1 {
        @include animation(count1st 18s infinite);
    }
    .a-count-2 {
        @include animation(count2nd 18s infinite);
    }
    .a-count-3 {
        @include animation(count3rd 18s infinite);
    }
}