CSS animation and keyframes mixins

css-animation-keframes.sass

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

=animation ($delay, $duration, $animation, $count: infinite, $function: ease-in-out, $fill_mode:forwards)
  -webkit-animation-delay: $delay
  -webkit-animation-duration: $duration
  -webkit-animation-name: $animation
  -webkit-animation-timing-function: $function
  -webkit-animation-iteration-count: $count
  -webkit-animation-fill-mode: $fill_mode

  -moz-animation-delay: $delay
  -moz-animation-duration: $duration
  -moz-animation-name: $animation
  -moz-animation-timing-function: $function
  -moz-animation-iteration-count: $count
  -moz-animation-fill-mode: $fill_mode

  -o-animation-delay: $delay
  -o-animation-duration: $duration
  -o-animation-name: $animation
  -o-animation-timing-function: $function
  -o-animation-iteration-count: $count
  -o-animation-fill-mode: $fill_mode

  -ms-animation-delay: $delay
  -ms-animation-duration: $duration
  -ms-animation-name: $animation
  -ms-animation-timing-function: $function
  -ms-animation-iteration-count: $count
  -ms-animation-fill-mode: $fill_mode

  animation-delay: $delay
  animation-duration: $duration
  animation-name: $animation
  animation-timing-function: $function
  animation-iteration-count: $count
  animation-fill-mode: $fill_mode

usage:

$animation-name: my-pulsate
$color: blue

+keyframes($animation-name)
  0%
    box-shadow: 0px 0px 10px 0px $color
  50%
    box-shadow: 0px 0px 10px 3px $color
  100%
    box-shadow: 0px 0px 10px 0px $color

.my-selector
  +animation(0, 1s, $animation-name)