css 3 animations using sass syntax. Examples provided

1. Example.sass

+keyframe(fadeout)
  0% 
    opacity: 1
  100%
    opacity: 0

+keyframe(changecolor)
  0% 
    color: #000
  100%
    color: #FFF

// Use in a element like <div id="target_element"></div>
div#target_element
  +animation( changecolor, 5s )

2. Keyframe.sass

=keyframe($animation_name)      
  @-webkit-keyframes #{$animation_name}
    @content
  @-moz-keyframes #{$animation_name}
    @content
  @keyframes {$animation_name}
    @content

3. animation.sass

//************ Example usage: *************************
// +animation( changecolour 5s )
// +animation( dissapear, 5s, $delay: 3s )
//---------------fill---------------------
//forwards  Element position ends on final frame.
//backwards Element returns to position of first frame.
//both      Sets the element to the position of the first keyframe immediately on page load, regardless
//          of the element’s default location in other CSS. Only applicable if animation-delay has a
//          value greater than 0.
//none      Element starts and ends at initial default position provided by CSS outside of keyframes.
//******************************************************
=animation( $animation, $duration, $timing-func: linear, $fill: forwards, $delay: 0  )
  -webkit-animation: $duration $delay $animation $fill $timing-func
  -moz-animation:    $duration $delay $animation $fill $timing-func
  animation:         $duration $delay $animation $fill $timing-func