after-dark-css/rainstorm.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Rainstorm | After Dark in CSS</title>
  <link rel="shortcut icon" href="img/favicon.png" />
  <link rel="stylesheet" href="base.css">
  <style>
  
    body {
      overflow: hidden;
      /* lightning animation */
      -webkit-animation: flash 8s linear infinite;
      -moz-animation: flash linear 8s infinite;
      -o-animation: flash linear 8s infinite;
      animation: flash linear 8s infinite;
    }

    .rain {
      position: absolute;
      width: 3004px; /* (2560 + 1244) */
      height: 4800px;
      top: -4800px;
      left: -1244px;
    }
    
    /* Two waves of nearby rain */
    .r1 {
      -webkit-animation: fall 2.2s infinite linear;
      -moz-animation: fall 2.2s infinite linear;
      -o-animation: fall 2.2s infinite linear;
      animation: fall 2.2s infinite linear;
      background: url(img/rain-tile-near.png) repeat;     
    }
    .r2 {
      -webkit-animation: fall 2.2s 1s infinite linear;
      -moz-animation: fall 2.2s 1s infinite linear;
      -o-animation: fall 2.2s 1s infinite linear;
      animation: fall 2.2s 1s infinite linear;
      background: url(img/rain-tile-near.png) repeat;     
    }
    
    /* Two waves of mid-distant rain */
    .r3 {
      -webkit-animation: fall 4s infinite linear;
      -moz-animation: fall 4s infinite linear;
      -o-animation: fall 4s infinite linear;
      animation: fall 4s infinite linear;
      background: url(img/rain-tile-mid.png) repeat;  
    }
    .r4 {
      -webkit-animation: fall 4.5s 3.2s infinite linear;
      -moz-animation: fall 4.5s 3.2s infinite linear;
      -o-animation: fall 4.5s 3.2s infinite linear;
      animation: fall 4.5s 3.2s infinite linear;
      background: url(img/rain-tile-mid.png) repeat;
    } 
    
    /* Two waves of distant rain */
    .r5 {
      -webkit-animation: fall 6s infinite linear;
      -moz-animation: fall 6s infinite linear;
      -o-animation: fall 6s infinite linear;
      animation: fall 6s infinite linear;
      background: url(img/rain-tile-distant.png) repeat;  
    }
    .r6 {
      -webkit-animation: fall 6s 4s infinite linear;
      -moz-animation: fall 6s 4s infinite linear;
      -o-animation: fall 6s 4s infinite linear;
      animation: fall 6s 4s infinite linear;
      background: url(img/rain-tile-distant.png) repeat;
    }
    
    /**
     * Falling rain animation
     * Assumes a max screen resolution of 2560px x 1600px.
     * Rain falls the size of the div + the estimated 
     * height of the screen (1600 max). 4800 + 1600 = 6400.
     *
     * Making the rain fall straight down is easier for ensuring there is always
     * rain on the screen. However I can preserve the angle of falling rain with
     * a translateY of 1244px.
     */
    @-webkit-keyframes fall {
      from { 
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      to {
        -webkit-transform: translate(1244px, 6400px);
        -moz-transform: translate(1244px, 6400px);
        -o-transform: translate(1244px, 6400px);
        -ms-transform: translate(1244px, 6400px);
        transform: translate(1244px, 6400px);
      }
    }
    @-moz-keyframes fall {
      from { 
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      to {
        -webkit-transform: translate(1244px, 6400px);
        -moz-transform: translate(1244px, 6400px);
        -o-transform: translate(1244px, 6400px);
        -ms-transform: translate(1244px, 6400px);
        transform: translate(1244px, 6400px);
      }
    }
    @-o-keyframes fall {
      from { 
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      to {
        -webkit-transform: translate(1244px, 6400px);
        -moz-transform: translate(1244px, 6400px);
        -o-transform: translate(1244px, 6400px);
        -ms-transform: translate(1244px, 6400px);
        transform: translate(1244px, 6400px);
      }
    }
    @keyframes fall {
      from { 
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      to {
        -webkit-transform: translate(1244px, 6400px);
        -moz-transform: translate(1244px, 6400px);
        -o-transform: translate(1244px, 6400px);
        -ms-transform: translate(1244px, 6400px);
        transform: translate(1244px, 6400px);
      }
    }

    /**
     * Lightning Animation
     */
    @-webkit-keyframes flash {
      0% { }
      98% { background: black; }
      99% { background: white; }
      100% { background: black; }
    }
    @-moz-keyframes flash {
      0% { }
      98% { background: black; }
      99% { background: white; }
      100% { background: black; }
    } 
    @-o-keyframes flash {
      0% { }
      98% { background: black; }
      99% { background: white; }
      100% { background: black; }
    }
    @keyframes flash {
      0% { }
      98% { background: black; }
      99% { background: white; }
      100% { background: black; }
    }            
  </style>
</head>
  <body>
    <h1 class="visuallyhidden">Rainstorm Screensaver - After Dark in CSS</h1>
    <div class="rain r1"></div>
    <div class="rain r2"></div>    
    <div class="rain r3"></div>
    <div class="rain r4"></div>
    <div class="rain r5"></div>
    <div class="rain r6"></div>
  </body>
</html>