CSS3 animated intro

A movie-like intro with CSS3 animation

by Viktor H. Morales

HTML

<div id="presentation">
  <div class="background"></div>
  <div class="first">Bienvenidos a</div>
  <div class="second">Adelphos DAM DVD</div>
  <div class="third">Primer alquiler online de DVDs y BLU-RAY</div>
  <div class="fourth">¡En Ushuaia, Argentina!</div>
</div>

<h1>
Contenido web
</h1>

CSS

#presentation {
  color:#fff;
  text-shadow:0 0 10px #fff
}
#presentation a {
  color:#fff
}
#presentation .background{
  position:fixed;
  background-color:#222;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:999;
  -moz-animation-delay:9s; 
  -webkit-animation-delay:9s; 
  animation-delay:9s;
  -moz-animation-duration:2.5s;
  -webkit-animation-duration:2.5s;
  animation-duration:2.5s;
  -moz-animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
  -moz-animation-fill-mode:both;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  -moz-animation-name:last;
  -webkit-animation-name:last;
  animation-name:last
}
#presentation > div { 
  position:absolute;
  top:50%;
  left:10%;
  right:10%;
  text-align:center;
  z-index:999;font-size:40px
}
#presentation > div.first {
  -moz-animation-delay:1s;
  -webkit-animation-delay:1s;
  animation-delay:1s;
  -moz-animation-duration:2.5s;
  -webkit-animation-duration:2.5s;
  animation-duration:2.5s;
  -moz-animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
  -moz-animation-fill-mode:both;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  -moz-animation-name:scale;
  -webkit-animation-name:scale;
  animation-name:scale
}
#presentation > div.second {
  -moz-animation-delay:3s;
  -webkit-animation-delay:3s;
  animation-delay:3s;
  -moz-animation-duration:2.5s;
  -webkit-animation-duration:2.5s;
  animation-duration:2.5s;
  -moz-animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
  -moz-animation-fill-mode:both;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  -moz-animation-name:scale;
  -webkit-animation-name:scale;
  animation-name:scale
}
#presentation > div.third {
  -moz-animation-delay:5s;
  -webkit-animation-delay:5s;
  animation-delay:5s;
  -moz-animation-duration:2.5s;
  -webkit-animation-duration:2.5s;
  animation-duration:2.5s;
 ...