Keyframe Animations in SASS

CSS keyframe animations normally consist of 2 sets of code: the keyframe definition for the animation, and the animation properties itself. Because CSS animations still need their vendor-prefixes and there are several rules you need, a mixin is a great solution.

@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
  @-moz-keyframes #{$animationName} {
  @-o-keyframes #{$animationName} {
  @keyframes #{$animationName} {
@mixin animate($name, $duration, $iteration, $direction) {
  -webkit-animation-duration: $duration;
     -moz-animation-duration: $duration;
       -o-animation-duration: $duration;
          animation-duration: $duration;
  -webkit-animation-iteration-count: $iteration;
     -moz-animation-iteration-count: $iteration;
       -o-animation-iteration-count: $iteration;
          animation-iteration-count: $iteration;
  -webkit-animation-name: $name;
     -moz-animation-name: $name;
       -o-animation-name: $name;
          animation-name: $name;
  -webkit-animation-direction: $direction;
     -moz-animation-direction: $direction;
       -o-animation-direction: $direction;
          animation-direction: $direction;

Now, to create an animation, use the following code to declare the keyframes and create a mixin for the specific animation.

@include keyframes(pulsate) {
  from {
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 1;
  to {
    width: 50px;
    height: 50px;
    margin: -25px;
    opacity: 0;
@mixin pulsate {
  @include animate(pulsate, 0.6s, infinite, normal);

To use it on an element is easy:

#pulsate {
  @include pulsate;
  border: 5px solid #000;
  border-radius: 50px;
  position: absolute;
  left: 50%;
  top: 50%;

Click here to see it in action