Transition Delays Ex 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">

    <!---


888           8888888      888b     d888      8888888888       .d8888b.
888             888        8888b   d8888      888             d88P  Y88b
888             888        88888b.d88888      888             Y88b.
888             888        888Y88888P888      8888888          "Y888b.
888             888        888 Y888P 888      888                 "Y88b.
888             888        888  Y8P  888      888                   "888
888             888        888   "   888      888             Y88b  d88P
88888888      8888888      888       888      8888888888       "Y8888P"

    --->


    <style type="text/css">


#credit {
    bottom:3px;
    position:fixed;
    right:10px;
    float:right;
    font-family:calibri;
    color:black;
    font-size:9px;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:5px;

}

#credit a {
    color:black;
    background-color:white;
    padding:5px;
    -webkit-transition-duration:.8s;
    -moz-transition-duration:.8s;
    -o-transition-duration:.8s;
    -ms-transition-duration:.8s;
}

#credit a:hover {
    color:white;
    background-color:#00bdb3;
}


#content {
    width:250px;
    left:50%;
    margin-left:-165px;
    position:fixed;
    height:140px;
    padding:15px;
    background-color:black;
    font-family:Helvetica;
    text-transform:uppercase;
    letter-spacing:10px;
    color:white;
    font-size:25px;
    padding-top:100px;
    font-weight:100;
    text-align:center;
    top:50%;
    margin-top:-150px;
        transition-delay:.9s;

-webkit-transition-duration:.3s;
    -moz-transition-duration:.3s;
    -o-transition-duration:.3s;
    -ms-transition-duration:.3s;}

#content:hover {
        transition-delay:0s;

    background-color:#5a9aff;
    -webkit-transform:scale(2);
    -moz-transform:scale(2);
    -o-transform:scale(2);
    -ms-transform:scale(2);
}

#cloud_left {
    width:200px;
    height:200px;
    margin-left:-100%;
    opacity:0;
    -webkit-transition-duration:.3s;
    -moz-transition-duration:.3s;
    -o-transition-duration:.3s;
    -ms-transition-duration:.3s;
    transition-delay:.6s;
}

#cloud_left img {
    width:200px;
    height:200px;
    margin-left:-100px;
    margin-top:-200px;
    -webkit-transition-duration:.3s;
    -moz-transition-duration:.3s;
    -o-transition-duration:.3s;
    -ms-transition-duration:.3s;
}

#content:hover #cloud_left {
    opacity:1;
    margin-left:-20px;
        transition-delay:.3s;

}

#cloud_right {
    width:200px;
    margin-top:-200px;
    height:200px;
    margin-left:100%;
    opacity:0;
    -webkit-transition-duration:.3s;
    -moz-transition-duration:.3s;
    -o-transition-duration:.3s;
    -ms-transition-duration:.3s;
    transition-delay:.3s;
}

#cloud_right img {
    width:150px;
    height:150px;
    margin-left:100%;
    -webkit-transition-duration:.3s;
    -moz-transition-duration:.3s;
    -o-transition-duration:.3s;
    -ms-transition-duration:.3s;
}

#content:hover #cloud_right {
    opacity:1;
    margin-left:0px;
    margin-top:-200px;
        transition-delay:.6s;

}

#sun {
    width:200px;
    height:200px;
    margin-top:-500px;
    margin-left:180px;
    opacity:0;
    -webkit-transition-duration:.3s;
    -moz-transition-duration:.3s;
    -o-transition-duration:.3s;
    -ms-transition-duration:.3s;
    transition-delay:0s;
}

#sun img {
    width:100px;
    height:100px;
    margin-top:-500px;
    -webkit-transition-duration:.3s;
    -moz-transition-duration:.3s;
    -o-transition-duration:.3s;
    -ms-transition-duration:.3s;
}

#content:hover #sun {
    opacity:1;
    margin-top:120px;
        transition-delay:.9s;

}

    </style>

</head>
<body>

<div id="content">Hover Here
    <div id="cloud_left"><img src="http://www.freestockphotos.biz/pictures/15/15146/Illustration+of+a+stormy+cloud.png"></div>
    <div id="cloud_right"><img src="http://www.freestockphotos.biz/pictures/15/15146/Illustration+of+a+stormy+cloud.png"></div>
    <div id="sun"><img src="http://www.webweaver.nu/clipart/img/nature/planets/sun-wearing-sunglasses.png"</div>
</div>

    <div id="credit"><a href="http://ofcuteboys.tumblr.com/">ofcuteboys</a></div>


</body></html>