Explanation: One can do frame by frame animation in CSS-3 (this presently works best in WebKit based browsers). Essentially, one specifies a class which is activated when the image loads. One then uses the @-webkit-keyframes declaration to control the animation. One can include multiple frames (often represented as a percentage). In the example code below, I am only using a few frames.

Example JS/ CSS code:

Within the HTML itself, we indicate the class to be called when the image loads. This is accomplished with a bit of JavaScript (onload event handler below).

<img onload=”this.className=’loadImg‘” … >

Next, the .loadImg class points to the actual animation, the time for the animation to occur during (in milli-seconds) and describes how the animation is to be accessed (ease, ease-in, ease-in-out for example).

.loadImg {
-webkit-animation: slide 2000ms ease-in;

Lastly, we specify the various frames and associated effects. In the example below, the opacity goes from 0 to 1 over the entire animation and the image is translated and rotated during the animation as well.

@-webkit-keyframes slide {
0% { -webkit-transform: translateY(350px) rotate(-360deg); opacity: 0; }
60% { -webkit-transform: translateY(-20px) rotate(0deg); }
100% { opacity: 1; }

Example page (view the source code): (presently only works completely in -webkit based browsers). In this  example, I provide the above animation along with another animation when the image is clicked on.


Leave a Reply

Your email address will not be published. Required fields are marked *