animation with element width value sample

cssAnimationUsingElementWidth.coffee

# animation with element width value sample with JQuery
# generate style dom
generateCss = (name, diff) ->
  # sample: marquee like animation
  style = $("
  <style>
  @keyframes #{name} {
    0% {
      transform: translate(0%);
    }
    25% {
      transform: translate(0%);
    }
    50% {
      transform: translate(calc(-#{diff}px));
    }
    75% {
      transform: translate(calc(-#{diff}px));
    }
    100% {
      transform: translate(0%);
    }
  }
  </style>
  ");
  $("body").append(style);

childElements = $("CHILD_ELEMENT");
for i in [0..childElements.length]
  elm = $(childElements[i]);
  childWidth = elm.innerWidth();
  parentWidth = elm.parent().innerWidth();
  diff = childWidth - parentWidth;
  if diff > 0
    generateCss("elm#{i}", diff);
    elm.css("animation-name", "elm#{i}");
    elm.css("animation-duration", "#{.05 * diff}s")
    elm.css("animation-timing-function", "linear");
    elm.css("animation-iteration-count", "infinite");