A CodePen by Paul Reny. animation-timing-function visualized with an oscilloscope

index.haml

%h1 animation-timing-function visualized with an oscilloscope made with CSS3 animated with animation-timing-function
%small how meta is that?
.loading
  %p linear
  -(1..50).each do
    .bar.linear
.loading
  %p ease-in
  -(1..50).each do
    .bar.ease-in
.loading
  %p ease-out
  -(1..50).each do
    .bar.ease-out
.loading
  %p ease-in-out
  -(1..50).each do
    .bar.ease-in-out
.loading
  %p ease
  -(1..50).each do
    .bar.ease
.loading
  %p cubic-bezier(.17,.67,.45,-0.81)
  -(1..50).each do
    .bar.custom-one
.loading
  %p cubic-bezier(1,-1.04,.58,.97)
  -(1..50).each do
    .bar.custom-two
.loading
  %p cubic-bezier(0,1,0,-1)
  -(1..50).each do
    .bar.custom-three

style.scss

@import "compass";
$anim-dur: 2500ms;
$elem-count: 50;
$elem-width: 3px;
$elem-height: 7em;
$anim-delay: $anim-dur/$elem-count;
$base-color: #ccc;
$y:$elem-height/2;

/*set the default animation-timing-function if no CSS class is defined*/
$curve:cubic-bezier(.17,.67,.45,-0.81);

h1{text-shadow: .05em .05em .7em #ccc;}
p{font-weight:bold;margin-bottom:$elem-height/2;padding:1em;}
html,body{color:#eee;background:#111;text-align:center;}
.offset{
  height:$elem-height/2;
}
.loading {
  padding-bottom: $elem-height;
  border-bottom:3px solid white;
  @media all and(min-width:40em){display:inline-block;float:left;width:50%;}
  @media all and(min-width:50em){width:33.333%;}
  @media all and(min-width:70em){width:25%;}  
  .bar {
    animation-name: anim;
    animation-duration: $anim-dur;
    animation-iteration-count:infinite;
    animation:anim $anim-dur $curve infinite;
    display: inline-block;
    height: $elem-height;
    width: $elem-width;
    margin: -1.5px;
    padding: 0px;
    background: $base-color;
    @for $i from 1 through $elem-count {
      &:nth-of-type(#{$i}){animation-delay: $anim-delay*$i;} 
      &:nth-of-type(#{$i *2}){animation-name: animodd;}
    }
  }
}
@keyframes anim {
  0%,100% {transform: translateY(0px);}
  50% {transform: translateY($y);}
}
@keyframes animodd {
  0%,100% {transform: translateY(0px);}
  50% {transform: translateY(-$y);}
}
.bar.linear{animation-timing-function:linear;}
.bar.ease-out{animation-timing-function:ease-out;}
.bar.ease-in{animation-timing-function:ease-in;}
.bar.ease-in-out{animation-timing-function:ease-in-out;}
.bar.ease{animation-timing-function:ease;}
.bar.custom-one{animation-timing-function:cubic-bezier(.17,.67,.45,-0.81);}
.bar.custom-two{animation-timing-function:cubic-bezier(1,-1.04,.58,.97);}
.bar.custom-three{animation-timing-function:cubic-bezier(0,1,0,-1);}