12 principles of animation and CSS

After seeing this site about Disney's 12 basic princples of animation, I wondered if you could do something similiar just using HTML5 and CSS3. I especially like the cubic bezier functions for the timing between transformations; they make the animations look pretty alive:

Over here is a great page to play with the timings - try "easeInOutQuart", for example.

Unfortunately, all CSS transformations that are currently defined are linear in space. This is a dealbreaker for implementing Disney's 12 principles.

Still, playing with CSS transform, transitions, and animations was fun. Here some notes about my understanding of them:

You can do transforms like scale(x), scale(x,y), translate(x,y), ... These go into the "normal" CSS-rules, such as #stuff:hover {transform: scale(1.5)}.

If an element changes from one style to another, you can define how this transitionshould take place. You can exactly which CSS properties should tranisition smoothly, the length of the effect, the delay, and a "timing function" that allows non-linear timing.

Thirdly, you can define key-frame-rules for animations. Basically, using a \@keyframes rule, you specify how the element should look at certain points in time. Inside a normal styling rule, you specify how these transitions should take place. This is pretty cool, but unfortunately I was not able to figure out how to specify, for example, the timing-function seperately for each transition in the animation.

Here is an example that I played around with in jsfiddle:

/* This is the animation code. */
@keyframes example {
   0% { transform: scale(1.0); }
   /* 33%   { transform: scale(1.5, 0.7);} */
   /* 66% { transform: scale(1.0); } */
   100%   { transform: scale(1.5, 0.7);}
}

/* This is the element that we apply the animation to. */
div {
    width: 50px;
    height: 50px;
    margin: 50px 50px;
    background-color: #88F;
    line-height: 50px;
    text-align: center;
}

/* This is the element that we apply the animation to. */
div:hover {
   animation-name: example;
   animation-duration: 0.3s;
   animation-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
   /* animation-timing-function: linear; */
   animation-delay: 0s;             /* 0 is the default */
   animation-iteration-count: 2;    /* 1 is the default */
   animation-direction: alternate;  /* normal is the default */
}

For the html, I just used one or two div's. Note to self: An indepent, jsfiddle like wordpress plugin would be nice, but I could not find anything so far.

Addendum: The example at the top of the page uses transitions (not animations), with the following CSS added to my wordpress theme wordpress child theme:

#lookmabezier {
    width: 50px;
    height: 50px;
    margin: 50px 50px;
    background-color: #88F;
    line-height: 50px;
    text-align: center;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
    transition-delay: 0s;
}

#martinscanvas:hover #lookmabezier {
    transform: translateX(200px);
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
    transition-delay: 0s;
}

I used two nested divs, so that the hover on the outer div triggers the movement of the inner div. If you would trigge on the hover of the inner div, it moves out of the hover, and the animation can never finish.