Animated CSS Dusk

animated-css-dusk.markdown

Animated CSS Dusk

This sample was made to demonstrate (in a more exaggerated way) how CSS transforms and transitions can be leveraged to create complex effects. This demo also shows how to animate linear gradients despite lack of css support by transitioning opacities between 2 layers.

A Pen by Dacheng aka dSolver on CodePen.

License.

index.html

<div class="container">
  <div class="layer filter">
    
  </div>
  <div class="layer sunset">
    <div class="text">Sunset</div>
  </div>
  <div class="layer nighttime">
    <div class="text">Night</div>
  </div>
  <div class="layer stars">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="note">
    Click to shift between Sunset and Night.
  </div>
</div>

script.js

document.querySelector('.container').addEventListener('click', function(){
  this.className = (this.className === 'container night' ? 'container' : 'container night');
})

style.scss

html,body{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, Helvetica, Sans-serif;
}

.container{
  display: flex;
  width: 100%;
  height: 100%;
  background: white;
  position: relative;
  cursor: pointer;
  .layer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 4s ease;
    opacity: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 100%;
    overflow: hidden;
    &>div.text{
      display: flex;
      text-align: center;
      color: white;
      
      font-size: 36px;
      width: 50%;
      height: 50%;
      justify-content: center;
      align-items: center;
      transition: transform 4s ease, opacity 1.5s linear;
    }
    &.filter{
      background: linear-gradient(0deg, violet, #048);
    }
    &.sunset{
      background: linear-gradient(0deg, orange, blue);
      opacity: 0.5;
      &>div{
        transform: translateY(0%);
        opacity: 1;
      }
    }
    &.nighttime{
      background: linear-gradient(0deg, #04A, #000);
      opacity: 0;
      &>div{
        transform: translateY(-100%);
        opacity: 0;
      }
    }
    &.stars{
      opacity: 0.1;
      transition: opacity 4s ease, transform 4s;
      transform: translateY(-5%);
      &>div{
        transition: transform 0s;
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 3px;
        border-radius: 2px;
        background: white;
        box-shadow: 0 0 2px white;
        @for $i from 1 through 50{
          &:nth-child(#{$i}){
            transform: translateX(random(2200) + px) translateY(random(400) + px) scale(random(10)/7);
            box-shadow: 0 0 random(4)+px white;
            opacity: random(10)/10;
          }
        }
      }
    }
  }
  
  .note{
    padding: 20px;
    border: solid 1px white;
    width: 33.333%;
    color: white;
    text-align: center;
    font-size: 16px;
    position: absolute;
    bottom: 15px;
    left: 33.333%;
    background: rgba(125, 95, 85, 0.4);
    text-shadow: 0 1px 1px black;
    border-radius: 30px;
    transition: background 4s ease;
  }
  
  &.night{
    .layer:nth-child(2){
      opacity: 0;
      &>div{
        transform: translateY(100%);
        opacity: 0;
      }
    }
    .layer:nth-child(3){
      opacity: 0.8;
      &>div{
        transform: translateY(0%);
        opacity: 1;
      }
    }
    .layer.stars{
      opacity: 1;
      transform: translateY(0%);
      transition: opacity 8s ease, transform 15s ease;
    }
    .note{
      background: rgba(100, 100, 122, 0.02);
    }
  }
  
  
}