Animator Gists

animator.coffee

class @Animator
  @generate: (params={}) ->
    animation = "@-#{Animator.prefix()}-keyframes #{params["name"]} {"
    for keyframe, rules of params["keyframes"]
      animation += "#{keyframe} {"
      for property,value of rules
        animation += "#{property.replace("prefix",Animator.prefix())}: #{value};"
      animation += "}"
    animation += "}"
    
    if (lastSheet = document.styleSheets[document.styleSheets.length-1])?
      index = lastSheet.cssRules.length if lastSheet.cssRules?
      lastSheet.insertRule(animation, index || 0)
  
  @animate: (params={}) ->
    if params.element? and params.element.each?
      params.element.each (index, element) ->
        Animator._setStylesOn(element,params.styles)
    else if params.element?
      Animator._setStylesOn(element,params.styles)
  
  @_setStylesOn: (element,styles={}) ->
    for property, value of styles
      element.style[Modernizr.prefixed(property)] = value
  
  @prefix: ->
    unless Animator._prefix?
      style = document.createElement('test').style
      for prefix in Modernizr._domPrefixes
        Animator._prefix = prefix if style["-#{prefix}-animation-name"]?
    Animator._prefix

generated_animation.css

/* Output if ran in webkit: */
@-webkit-keyframes rocking {from {-webkit-transform: rotate(-10deg) translate(50px,0);-webkit-animation-timing-function: ease-in-out;}50% {-webkit-transform: rotate(10deg) translate(-150px,0);-webkit-animation-timing-function: ease-in-out;}to {-webkit-transform: rotate(-10deg) translate(50px,0);-webkit-animation-timing-function: ease-in-out;}}

prefix-example.css

/* In a perfect world. */
body { background: linear-gradient(left, #f00 0, #00f 100%); }

/* What we should do. */
body { 
  background: -webkit-linear-gradient(left, #f00 0, #00f 100%);
  background: -khtml-linear-gradient(left, #f00 0, #00f 100%);
  background: -icab-linear-gradient(left, #f00 0, #00f 100%);
  background: -moz-linear-gradient(left, #f00 0, #00f 100%);
  background: -o-linear-gradient(left, #f00 0, #00f 100%);
  background: -ms-linear-gradient(left, #f00 0, #00f 100%);
  background: linear-gradient(left, #f00 0, #00f 100%);
}

/* What ends up happening a lot of the time. */
body { background: -webkit-linear-gradient(left, #f00 0, #204a87 100%); }

ready.coffee

$(document).ready ->
  Animator.generate
    "name": "rocking"
    "keyframes":
      "from":
        "-prefix-transform": "rotate(-10deg) translate(50px,0)"
        "-prefix-animation-timing-function": "ease-in-out"
      "50%":
        "-prefix-transform": "rotate(10deg) translate(-150px,0)"
        "-prefix-animation-timing-function": "ease-in-out"
      "to": 
        "-prefix-transform": "rotate(-10deg) translate(50px,0)"
        "-prefix-animation-timing-function": "ease-in-out"
  
  Animator.animate
    element: $("#red")
    styles:
      "animationName": "rocking"
      "animationDuration": "5s"
      "animationIterationCount": "infinite"

sumo_balancing.css

/* =BALANCING_ACT
   ------------------------------------------------------ */
   #balancing_act {
        -webkit-animation-name: rocking; 
        -webkit-animation-duration: 20s; 
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: rocking; 
        -moz-animation-duration: 20s; 
        -moz-animation-iteration-count: infinite;
        -o-animation-name: rocking; 
        -o-animation-duration: 20s; 
        -o-animation-iteration-count: infinite;
        -ms-animation-name: rocking; 
        -ms-animation-duration: 20s; 
        -ms-animation-iteration-count: infinite;
      animation-name: rocking;
      animation-duration: 20s;
      animation-iteration-count: infinite;
      left: 100px;
      position: absolute;
      top: 0;
      width: 500px;
      z-index: 2;
      -webkit-transform: translateZ(0);
   }
   
   @keyframes rocking {
      from {
        transform: rotate(0deg) translate(50px,0);
        animation-timing-function: ease-in-out;
      }
      50% {
        transform: rotate(0) translate(-150px,0);
        animation-timing-function: ease-in-out;
      }
      to { 
        transform: translate(50px,0);
        animation-timing-function: ease-in-out;
      }
   }

   @-webkit-keyframes rocking {
      from {
        -webkit-transform: rotate(0deg) translate3d(50px,0,0);
        -webkit-animation-timing-function: ease-in-out;
      }
      50% {
        -webkit-transform: rotate(0) translate3d(-150px,0,0);
        -webkit-animation-timing-function: ease-in-out;
      }
      to { 
        -webkit-transform: translate3d(50px,0,0);
        -webkit-animation-timing-function: ease-in-out;
      }
   }
   
   @-moz-keyframes rocking {
      from {
        -moz-transform: rotate(0deg) translate(50px,0);
        -moz-animation-timing-function: ease-in-out;
      }
      50% {
        -moz-transform: rotate(0) translate(-150px,0);
        -moz-animation-timing-function: ease-in-out;
      }
      to { 
        -moz-transform: translate(50px,0);
        -moz-animation-timing-function: ease-in-out;
      }
   }
   
   @-o-keyframes rocking {
      from {
        -o-transform: rotate(0deg) translate(50px,0);
        -o-animation-timing-function: ease-in-out;
      }
      50% {
        -o-transform: rotate(0) translate(-150px,0);
        -o-animation-timing-function: ease-in-out;
      }
      to { 
        -o-transform: translate(50px,0);
        -o-animation-timing-function: ease-in-out;
      }
   }
   
   @-ms-keyframes rocking {
      from {
        -ms-transform: rotate(0deg) translate(50px,0);
        -ms-animation-timing-function: ease-in-out;
      }
      50% {
        -ms-transform: rotate(0) translate(-150px,0);
        -ms-animation-timing-function: ease-in-out;
      }
      to { 
        -ms-transform: translate(50px,0);
        -ms-animation-timing-function: ease-in-out;
      }
   }