CSS Mood Lighting

CSS Mood Lighting.markdown

CSS Mood Lighting

Using CSS keyframes to animate background gradients

A Pen by Ally Baird on CodePen.

License.

index.html

  <div class="holder">
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
    <div class="txt">
      <h1>Mood Lighting</h1>
      <p>Using only CSS</p>
    </div>
  </div>

style.css

    @import url(https://fonts.googleapis.com/css?family=Bitter);
    body {
      margin: 0;
      font-family: 'Bitter', serif;
      text-align: center;
    }
    .holder,
    .first,
    .second,
    .third {
      height: 100vh;
      width: 100vw;
    }
    .first,
    .second,
    .third {
      position: absolute;
    }
    .second,
    .third {
      opacity: 0;
    }
    .holder {
      height: 100vh;
      position: relative;
      z-index: 1;
    }
    .first {
      animation: first 10s infinite;
      background: linear-gradient(#5ff8ca, #60e08c);
      z-index: 10;
    }
      @keyframes first {
        0% {opacity: 1.0;}
        10% {opacity: 0.8;}
        20% {opacity: 0.6;}
        30% {opacity: 0.4;}
        40% {opacity: 0.2;}
        50% {opacity: 0.1;}
        60% {opacity: 0.2;}
        70% {opacity: 0.4;}
        80% {opacity: 0.6;}
        90% {opacity: 0.8;}
        100% {opacity: 1.0;}
      }

    .second {
      animation: second 10s infinite; animation-delay: 2s;
      background: linear-gradient(#19eaa6, #00a1f0);
      z-index: 20;
    }
      @keyframes second {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .third {
      animation: third 10s infinite;
      animation-delay: 8s;
      background: linear-gradient(#aab7f8, #ff75c6);
      z-index: 30;
    }
      @keyframes third {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .txt {
      margin-top: calc(50vh - 43px);
      position: absolute;
      width: 100%;
      z-index: 1000;
    }
    h1 {
      font-size: 40px;
      font-weight: 400;
      margin: 0;
    }
    p {
      font-size: 20px;
      margin-top: 26px;
    }