CSS Transition Demo

There are three files used to create this effect.
HTML file
CSS file
Javascript file

HTML file "transitions.html"

<!DOCTYPE html>
<html>
<head>
<title>CSS Transition Demo</title>
<link rel="stylesheet" href="transitions.css" type="text/css">
<script src="transitions.js" type="text/javascript"></script>
</head>
<body>
<div onclick="updateTransition()"></div>
<div ><p>
Lorem ipsum dolor sit amet <br>
Consectetuer congue ac et Vestibulum <br>
Eros id consectetuer massa eget <br>
Curabitur magna dis Nam felis <br>
Venenatis lacus consequat accumsan sem <br>
Diam et porttitor eget nunc <br>
Pretium semper wisi Vivamus consequat <br>
Et Curabitur enim wisi orci <br>
Gravida sed vitae gravida nonummy <br>
Dui vel suscipit tempus hendrerit <br>
Vivamus libero adipiscing et Curabitur <br>
Vitae pede venenatis et vel <br>
Et id et orci justo <br>
Enim ac nulla pharetra dictum <br>
Hac senectus arcu volutpat molestie <br>
Pretium tristique fringilla tortor urna <br>
Auctor egestas nibh fermentum et <br>
Nulla vel ut quam augue <br>
Quis condimentum augue penatibus lacinia <br>
Orci nascetur cursus semper est <br>
Arcu eget dolor et elit <br>
Odio justo felis tincidunt massa <br>
</p></div>
<div ><p>Lorem ipsum dolor sit amet
consectetuer id semper lacus libero in. Convallis urna elit malesuada Duis
consequat Nam nibh nulla nec nunc. Elit nonummy tincidunt malesuada eget
lacinia</p></div>
<div ><p>All Done<br>
All Done<br>
All Done<br>
All Done<br>
All Done<br>
All Done<br>
All Done<br>
All Done<br>
</p></div>
<div ><p>
Hac senectus arcu volutpa<br>
Pretium tristique fring<br>
Auctor egestas nibh fer<br>
Nulla vel ut quam augue<br>
Quis condimentum augue<br>
Orci nascetur cursus<br>
Arcu eget dolor et elit<br>
Odio justo felis tincid<br>
</p></div>
</body>
</html>

CSS file "transitions.css"

.example1 {
width: 50px;
height: 30px;
position: absolute;
left: 75px;
top: 500px;
z-index: 1;
background: #570619;
color: #E8F3F8;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
}

.example1Done {
width: 900px;
height: 30px;
position: absolute;
left: 75px;
top: 500px;
z-index: 1;
background: #570619;
color: #E8F3F8;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-transition-property: width;
-moz-transition-duration: 3s;
}

.example2 {
width: 0px;
height: 10px;
position: absolute;
left: 100px;
top: 510px;
z-index: 2;
padding: 0px;
background: #80ABA1;
color: #E8F3F8;
-moz-border-radius: 5px;
border-radius:5px;
}

.example2Done {
width: 850px;
height: 10px;
position: absolute;
left: 100px;
top: 510px;
z-index: 2;
padding: 0px;
background: #80ABA1;
color: #E8F3F8;
-moz-border-radius: 5px;
-moz-transition-property: width;
-moz-transition-duration: 3s;
}

.example3Done {
vertical-align: middle;
text-align: center;
width: 850px;
height: 475px;
position: absolute;
left: 100px;
top: 45px;
z-index: 2;
padding: 0px;
background: #80ABA1;
color: #E8F3F8;
-moz-border-radius: 5px;
-moz-transition-property: height, top;
-moz-transition-duration: 3s;
}

.example4 {
width: 0px;
height: 125px;
position: absolute;
left: 50px;
top: 85px;
z-index: 3;
background: #A3C296;
color: #E3FDD8;
-moz-border-radius: 25px;
-moz-box-shadow: 10px 10px 25px #333;
}

.example4Done {
width: 250px;
height: 125px;
padding:10px;
text-align: justify;
position: absolute;
left: 50px;
top: 85px;
z-index: 3;
background: #A3C296;
color: #E3FDD8;
-moz-border-radius: 25px;
-moz-box-shadow: 10px 10px 25px #333;
-moz-transition-property: width;
-moz-transition-duration: 5s;
}

.example5 {
text-align: center;
width: 100px;
height: 0px;
position: absolute;
left: 900px;
top: 25px;
z-index: 3;
background: #F3EDBB;
color: #A72E52;
-moz-border-radius: 25px;
-moz-box-shadow: 10px 10px 25px #333;
}

.example5Done {
text-align: center;
width: 100px;
height: 200px;
position: absolute;
left: 900px;
top: 25px;
z-index: 3;
background: #F3EDBB;
color: #A72E52;
-moz-border-radius: 25px;
-moz-box-shadow: 10px 10px 25px #333;
-moz-transition-property: height;
-moz-transition-duration: 5s;
}

.example6 {
text-align: center;
width: 0px;
height: 0px;
position: absolute;
left: 50px;
top: 260px;
z-index: 3;
color: #A72E52;
opacity: 0.7;
-moz-border-radius: 25px;
-moz-box-shadow: 10px 10px 25px #333;
background-image: -moz-linear-gradient(top, yellow, green);
}

.example6Done {
text-align: center;
width: 200px;
height: 200px;
position: absolute;
left: 50px;
top: 260px;
z-index: 3;
color: #A72E52;
opacity: 0.7;
-moz-transform: rotate(360deg);
-moz-border-radius: 25px;
-moz-box-shadow: 10px 10px 25px #333;
background-image: -moz-linear-gradient(top, #72F2F1, #A4A4BC);
-moz-transition-property: -moz-transform, height, width;
-moz-transition-duration: 5s;
}

.exampletext {
visibility: hidden;
opacity: 0;
}

.exampletextDone {
visibility: visible;
opacity: 1;
-moz-transition-property: opacity;
-moz-transition-duration: 3s;
}

Javascript file "transitions.js"

var element = 0;
var el;

function updateTransition() {
element++;
switch (element) {
case 1:
el = document.querySelector("div.example1");
if (el) {
el.className = "example1Done";
el.addEventListener("transitionend", updateTransition, true);
}
break;

case 2:
el.removeEventListener("transitionend", updateTransition, true);
el = document.querySelector("div.example2");
if (el) {
el.className = "example2Done";
el.addEventListener("transitionend", updateTransition, true);
}
break;

case 3:
el.removeEventListener("transitionend", updateTransition, true);
el = document.querySelector("div.example2Done");
if (el) {
el.className = "example3Done";
el.addEventListener("transitionend", updateTransition, true);
}
break;

case 4:
el.removeEventListener("transitionend", updateTransition, true);
el = document.querySelector("div.example4");
if (el) {
el.className = "example4Done";
el.addEventListener("transitionend", updateTransition, true);
}
break;

case 5:
el.removeEventListener("transitionend", updateTransition, true);
el = document.querySelector("div.example5");
if (el) {
el.className = "example5Done";
el.addEventListener("transitionend", updateTransition, true);
}
break;

case 6:
el.removeEventListener("transitionend", updateTransition, true);
el = document.querySelector("div.example6");
if (el) {
el.className = "example6Done";
el.addEventListener("transitionend", updateTransition, true);
}
break;

case 7:
el.removeEventListener("transitionend", updateTransition, true);
var elList = document.querySelectorAll("p.exampletext");
if (elList) {
for each (var i in elList){
i.className = "exampletextDone";
}
}
break;
}
return el;
}