SASS CSS animation mixin

gistfile1.sass

/* animation mixins */
@import "compass/css3/shared"
@mixin animation ($animation_name, $duration: 500ms, $fill_mode: forwards, $iteration_count: 1, $delay: 0,  $direction: normal, $timing_function: ease)
  +experimental(animation-name, $animation_name)
  +experimental(animation-duration, $duration)
  @if $fill_mode != none
    +experimental(animation-fill-mode, $fill_mode)
  @if $iteration_count != 1
    +experimental(animation-iteration-count, $iteration_count)
  @if $delay != 0
    +experimental(animation-delay, $delay)
  @if $direction != normal
    +experimental(animation-direction, $direction)
  @if $timing_function != ease
    +experimental(animation-timing-function, $timing_function)
    
@mixin keyframe ($animation_name)
  @-webkit-keyframes #{$animation_name}
    @content
  @-moz-keyframes #{$animation_name}
    @content
  @keyframes #{$animation_name}
    @content

/* example animation */
@include keyframe(pointypoint)
  0%
    +transform(translateY(0))
  50%
    +transform(translateY(10px))
  100%
    +transform(translateY(0))

.bob:hover
  @include animation(pointypoint, 500ms, forwards, infinite)

A mixin to make my life easier with animations (as animations isn't in compass by default - currently)

It's built to give all the options you need, but not to spit out all rules if most of them are defaults, to reduce the size of the code.

PS - sorry Opera 12 users, but the -o-animation prefix was apparently only ever used in Opera12, so on balance I decided smaller code was a bigger concern.

updated based on some ace work by @annez (as usual) https://gist.github.com/annez/9783177