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): http://learning-html5.info/CSS3/CSS_KeyFrames.html (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.
References:
Loading ...