Question

I need to understand how to create a simple animation in HTML 5 or CSS3.

Suppose you have this sprite (see picture) and you need to create an animation with 4 frames. The animation has to last exactly 1 second. I don’t want a smooth animation between the frames, I want it to jump from one state to the other without interpolation. These are the ball 4 frames:

                  X        Y      ROTATION       OPACITY (%)
First frame:     100      220        10            5
Second frame:    150      240        18            25
Third frame:     160      280        32            55
Fourth frame:    170      290        47            78

In resume, every 0.25s the ball has to assume one of these keyframes. No loop on the animation.

Can you guys give an example on how to do that using CSS or HTML5/Javascript? (the method that produces the less CPU intensive approach). Thanks.

Answer 1

This can be done with pure CSS3 using @keyframes, animation, transform: rotate(angle) translate(x,y); and opacity.

Here’s an example (using the -webkit- vendor prefix, use -moz-, -o-, -ms- for optimal compatibility): http://jsfiddle.net/QaPaK/
The example only works in Chrome and Safari, because I did not add the other prefixes for a compact example.

HTML (animating an <img> element, for example):

<img src="https://i.stack.imgur.com/KLNOU.png" id="test">​

CSS:

/* Replace -webkit- with moz-, -o-, -ms- for cross-browser compatibility */
#test {
    -webkit-transform-origin: top left;
    -webkit-animation-name: foo;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes foo {
    0%, 25% { /* State 1 */
        -webkit-transform: rotate(10deg) translate(100px, 200px);
        opacity: 0.05;
    }
    25%, 50% { /* State 2 */
        -webkit-transform: rotate(18deg) translate(150px, 240px);
        opacity: 0.25;
    }
    50%, 75% { /* State 3 */
        -webkit-transform: rotate(32deg) translate(160px, 280px);
        opacity: 0.55;
    }
    75%, 100% { /* State 4 */
        -webkit-transform: rotate(47deg) translate(170px, 290px);
        opacity: 0.78;
    }
}