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

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  &.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }

  &.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }

  &.bounceIn,
  &.bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
  }

  &.flipOutX,
  &.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
  }
}