CSS3 replica of a GIF image

Graphics Interchange Format (also known as gif) is a bitmap image format that was introduced by CompuServe. It is widely used in World Wide Web for quite so long. Here we can replicate a GIF animated image with the help of Cascading Style Sheet(CSS) animation effect. The GIF image is basically developed from several individual pictures which gets changed in a fraction of seconds to make it look life its a moving picture as a whole.

Here instead of generating an individual GIF image we are going to generate the sequences of these images with the help of CSS animation effect. The code will mostly be using the transition between the opacity:0 to opacity:1. This have to exactly time in such a way that one image comes after another in proper order. Lets take a look at a DEMO.

The original GIF animated image

The CSS3 animated image sequence

NOTE: The replication of a GIF image through CSS3 is not cost effective. For this simple GIF animated image it took almost 1K lines of code to get it in the expected shape.

Code of the Snippet

Paste this inside header part or your CSS style sheet
<style type="text/css">
div#gif_container{
position:relative;
height:550px;
}

CSS3 : A Movie made by scripting

A Short film can also be made from images and some dialogues. What if you can combine it without filming and make it Movie??

NOTE: Reload the page to watch the movie again

Like a petel of a rose waiting to fall down, my mind roamed around for someone to hold hand with...

I got a friend .. Best friend .. I was falling for her. My mind told me not to but my heart had its own way.

I desperately wanted her in my life. I was afraid whether she would say "No" !!! I will loose a wonder full friend I have ever had.

There is no greater agony than bearing an untold love story inside you. When she said good bye that day, I chose to bear that agony inside me.

An Untold Love story - LOVE beats

Code of the Snippet

Paste this inside header part or your CSS style sheet
<style type="text/css">
div#movie_cover{
position:relative;
height:600px;
width:550px;
margin-top:100px;
margin-bottom:150px;
background-color:white;

}