html.de - Simple CSS Animation

by SpiceLab

HTML

<div id="WhitePlane"></div>
<div id="Box"></div>

CSS

body {
    background: #666;
    }
   
@keyframes Einblendung {     
      100% {opacity: 0.0;}
    }  
 
#WhitePlane {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  min-height:100%;
  background-color: white;
  opacity: 1.0;
  animation: Einblendung;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
   
#Box {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 1200px;
}