animations

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:

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>