Code-Snippets: 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;

}

img#image1{
position:absolute;
opacity:0;
padding:25px;
-webkit-animation:image_come 11s; /* Chrome, Safari, Opera */
animation:image_come 11s;
animation-delay: 1s;
-webkit-animation-delay: 1s;

}

p#para1{
position:absolute;
top:350px;
opacity:0;
font-size:200%;
padding:25px;
-webkit-animation:para_come 8s; /* Chrome, Safari, Opera */
animation:para_come 8s;
animation-delay: 3s;
-webkit-animation-delay: 3s;

}

/* Chrome, Safari, Opera */
@-webkit-keyframes para_come
{
0% {opacity:0;}
45% {opacity:1;}
90% {opacity:1;}
100% {opacity:0;}
}

/* Standard syntax */
@keyframes para_come
{
0% {opacity:0;}
45% {opacity:1;}
90% {opacity:1;}
100% {opacity:0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes image_come
{
0% {opacity:0;}
45% {opacity:1;}
80% { top:0px;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
90% {opacity:1;}
100% {opacity:0; top:35px;
-ms-transform: rotate(8deg); /* IE 9 */
-webkit-transform: rotate(8deg); /* Chrome, Safari, Opera */
transform: rotate(8deg);
}
}

/* Standard syntax */
@keyframes image_come
{
0% {opacity:0;}
45% {opacity:1;}
80% { top:0px;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
90% {opacity:1;}
100% {opacity:0; top:35px;
-ms-transform: rotate(8deg); /* IE 9 */
-webkit-transform: rotate(8deg); /* Chrome, Safari, Opera */
transform: rotate(8deg);
}
}

/****************************/

img#image2{
position:absolute;
opacity:0;
padding:25px;
-webkit-animation:image_come1 11s; /* Chrome, Safari, Opera */
animation:image_come1 11s;
animation-delay: 12s;
-webkit-animation-delay: 12s;

}

p#para2{
position:absolute;
top:350px;
opacity:0;
font-size:200%;
padding:25px;
-webkit-animation:para_come1 8s; /* Chrome, Safari, Opera */
animation:para_come1 8s;
animation-delay: 15s;
-webkit-animation-delay: 15s;

}

/* Chrome, Safari, Opera */
@-webkit-keyframes para_come1
{
0% {opacity:0;}
45% {opacity:1;}
90% {opacity:1;}
100% {opacity:0;}
}

/* Standard syntax */
@keyframes para_come1
{
0% {opacity:0;}
45% {opacity:1;}
90% {opacity:1;}
100% {opacity:0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes image_come1
{
0% {opacity:0;}
45% {opacity:1;}
80% { top:0px;left:0px;
width:500px;
height:334px;
-ms-transform: skew(0deg,0deg); /* IE 9 */
-webkit-transform: skew(0deg,0deg); /* Chrome, Safari, Opera */
transform: skew(0deg,0deg);
}
90% {opacity:1;}
100% {opacity:0; top:35px;left:100px;
width:300px;
height:200px;
-ms-transform: skew(10deg,10deg); /* IE 9 */
-webkit-transform: skew(10deg,10deg); /* Chrome, Safari, Opera */
transform: skew(10deg,10deg);
}
}

/* Standard syntax */
@keyframes image_come1
{
0% {opacity:0;}
45% {opacity:1;}
80% { top:0px;left:0px;
width:500px;
height:334px;
-ms-transform: skew(0deg,0deg); /* IE 9 */
-webkit-transform: skew(0deg,0deg); /* Chrome, Safari, Opera */
transform: skew(0deg,0deg);
}
90% {opacity:1;}
100% {opacity:0; top:35px;left:100px;
width:300px;
height:200px;
-ms-transform: skew(10deg,10deg); /* IE 9 */
-webkit-transform: skew(10deg,10deg); /* Chrome, Safari, Opera */
transform: skew(10deg,10deg);
}
}

/***************************/

img#image3{
position:absolute;
opacity:0;
padding:25px;
-webkit-animation:image_come2 12s; /* Chrome, Safari, Opera */
animation:image_come2 12s;
animation-delay: 24s;
-webkit-animation-delay: 24s;

}

p#para3{
position:absolute;
top:375px;
opacity:0;
font-size:200%;
padding:25px;
-webkit-animation:para_come2 9s; /* Chrome, Safari, Opera */
animation:para_come2 9s;
animation-delay: 25s;
-webkit-animation-delay: 25s;

}

/* Chrome, Safari, Opera */
@-webkit-keyframes para_come2
{
0% {opacity:0;}
45% {opacity:1;}
90% {opacity:1;}
100% {opacity:0;}
}

/* Standard syntax */
@keyframes para_come2
{
0% {opacity:0;}
45% {opacity:1;}
90% {opacity:1;}
100% {opacity:0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes image_come2
{
0% {opacity:0;}
45% {opacity:1;}
80% {
-ms-transform: scale(1,1); /* IE 9 */
-webkit-transform: scale(1,1); /* Chrome, Safari, Opera */
transform: scale(1,1)
}
90% {opacity:1;}
100% {opacity:0;
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Chrome, Safari, Opera */
transform: scale(0.5,0.5)
}
}

/* Standard syntax */
@keyframes image_come2
{
0% {opacity:0;}
45% {opacity:1;}
80% {
-ms-transform: scale(1,1); /* IE 9 */
-webkit-transform: scale(1,1); /* Chrome, Safari, Opera */
transform: scale(1,1)
}
90% {opacity:1;}
100% {opacity:0;
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Chrome, Safari, Opera */
transform: scale(0.5,0.5)
}
}

/***************************/

img#image4{
position:absolute;
opacity:0;
padding:25px;
-webkit-animation:image_come3 16s; /* Chrome, Safari, Opera */
animation:image_come3 16s;
animation-delay: 36s;
-webkit-animation-delay: 36s;

}

p#para4{
position:absolute;
top:350px;
opacity:0;
font-size:200%;
padding:25px;
-webkit-animation:para_come3 8s; /* Chrome, Safari, Opera */
animation:para_come3 8s;
animation-delay: 37s;
-webkit-animation-delay: 37s;

}

/* Chrome, Safari, Opera */
@-webkit-keyframes para_come3
{
0% {opacity:0;}
45% {opacity:1;}
90% {opacity:1; top:350px;}
100% {opacity:0; top:300px;}
}

/* Standard syntax */
@keyframes para_come3
{
0% {opacity:0;}
45% {opacity:1;}
90% {opacity:1; top:350px;}
100% {opacity:0; top:300px;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes image_come3
{
0% {opacity:0;}
45% {opacity:1;}
80% { left:0px; }
85% {opacity:1;}
100% {opacity:0; left:-55px;}
}

/* Standard syntax */
@keyframes image_come3
{
0% {opacity:0;}
45% {opacity:1;}
80% { left:0px; }
85% {opacity:1;}
100% {opacity:0; left:-55px;}
}

/***************************/

p#end_para{
font-weight:900;
position:absolute;
top:350px;
left:50px;
opacity:0;
font-size:300%;
padding:25px;
color:#ff0000;
-webkit-animation:para_come4 5s; /* Chrome, Safari, Opera */
animation:para_come4 5s;
animation-delay: 45s;
-webkit-animation-delay: 45s;

}

/* Chrome, Safari, Opera */
@-webkit-keyframes para_come4
{
0% {opacity:0;}
45% {opacity:1;}
55% {text-shadow: 0px 0px #ff0000;}
57% {text-shadow: 2px 1px #ff0000;}
58% {text-shadow: 0px 0px #ff0000;}
60% {text-shadow: 0px 0px #ff0000;}
62% {text-shadow: 2px 1px #ff0000;}
63% {text-shadow: 0px 0px #ff0000;}
65% {text-shadow: 0px 0px #ff0000;}
67% {text-shadow: 2px 1px #ff0000;}
68% {text-shadow: 0px 0px #ff0000;}
70% {text-shadow: 0px 0px #ff0000;}
72% {text-shadow: 2px 1px #ff0000;}
73% {text-shadow: 0px 0px #ff0000;}
75% {text-shadow: 0px 0px #ff0000;}
77% {text-shadow: 2px 1px #ff0000;}
78% {text-shadow: 0px 0px #ff0000;opacity:1;}
80% {text-shadow: 0px 0px #ff0000;}
82% {text-shadow: 2px 1px #ff0000;}
83% {text-shadow: 0px 0px #ff0000;}
85% {text-shadow: 0px 0px #ff0000;}
87% {text-shadow: 2px 1px #ff0000;}
88% {text-shadow: 0px 0px #ff0000;}
100% {opacity:0; }
}

/* Standard syntax */
@keyframes para_come4
{
{
0% {opacity:0;}
45% {opacity:1;}
55% {text-shadow: 0px 0px #ff0000;}
57% {text-shadow: 2px 1px #ff0000;}
58% {text-shadow: 0px 0px #ff0000;}
60% {text-shadow: 0px 0px #ff0000;}
62% {text-shadow: 2px 1px #ff0000;}
63% {text-shadow: 0px 0px #ff0000;}
65% {text-shadow: 0px 0px #ff0000;}
67% {text-shadow: 2px 1px #ff0000;}
68% {text-shadow: 0px 0px #ff0000;}
70% {text-shadow: 0px 0px #ff0000;}
72% {text-shadow: 2px 1px #ff0000;}
73% {text-shadow: 0px 0px #ff0000;}
75% {text-shadow: 0px 0px #ff0000;}
77% {text-shadow: 2px 1px #ff0000;}
78% {text-shadow: 0px 0px #ff0000;opacity:1;}
80% {text-shadow: 0px 0px #ff0000;}
82% {text-shadow: 2px 1px #ff0000;}
83% {text-shadow: 0px 0px #ff0000;}
85% {text-shadow: 0px 0px #ff0000;}
87% {text-shadow: 2px 1px #ff0000;}
88% {text-shadow: 0px 0px #ff0000;}
100% {opacity:0; }
}
}

</style>

Paste the below code in the page where you want to create item

<br />

Sentance 1 goes here </p>

Sentance two goes here </p>

sentance three goes here </p>

Sentance four goes here </p>

An end sentance goes here </p>

</div>