.do {animation: with <%= erb %>}
  

«

»

.html

<div id="animation-container">
  <div id="ball"></div>
</div>

.css

#ball {
  animation:move-ball 6s linear 0s infinite normal;
  background:url('redball.png') no-repeat center;
  height:26px;
  position:relative;
  top:46%;
  width:26px;
}

@keyframes move-ball {
  0%   {left:3%;}
  50%  {left:93%;}
  100% {left:3%;}
}

Welcome! This is a demo for using embedded Ruby(erb) and CSS for animation. It assumes you have some knowledge of css @keyframes and Ruby/Rails.

The area above between the buttons displays the animation, and the panel to the left shows the associated code (add in your own browser specific prefixes). This panel provides commentary about each step in the technique. Both panels are independently scrollable. Use the ‘back’ and ‘forward’ buttons bracketing the animation pane to cycle through this demo.

The current animation is about as basic as @keyframes get. One thing to make sure of is declaring an ‘s’ for seconds in the animation property, even if the value is 0. Firefox doesn't like it if you don't.

The html will be the same for the next couple of panels, so I'll leave it out until it becomes relevent again.