/r/web_design challenge 1 - CSS Weather Animations

index.html

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<div id="weather-animations">
  <div class="row">
    <div class="weather">
      <div id="rays" class="rays"></div>
      <div id="sun" class="sun"></div>
    </div>
    <div class="desc">sunny</div>
  </div>
  <br />
  <div class="row">
    <div class="weather">
      <div id="miniRays" class="rays"></div>
      <div id="miniSun" class="sun"></div>
      <div id="miniCloud" class="cloud"></div>
    </div>
    <div class="desc">partly cloudy</div>
  </div>
  <br />
  <div class="row">
    <div class="weather">
      <div id="miniDarkCloud" class="cloud"></div>
      <div id="cloud" class="cloud"></div>
    </div>
    <div class="desc">cloudy</div>
  </div>
  <br />
  <div class="row">
    <div class="weather">
      <div id="raindrop1" class="raindrop"></div>
      <div id="raindrop2" class="raindrop"></div>
      <div id="raindrop3" class="raindrop"></div>
      <div id="raindrop4" class="raindrop"></div>
      <div id="darkCloud" class="cloud"></div>
    </div>
    <div class="desc">rainy</div>
  </div>
  <br />
  <div class="row">
    <div class="weather">
      <div id="star1" class="star"></div>
      <div id="moon"></div>
      <div id="star2" class="star"></div>
      <div id="star3" class="star"></div>
    </div>
    <div class="desc">night</div>
  </div>
</div>

r-web_design-challenge-1-css-weather-animations.markdown

/r/web_design challenge 1 - CSS Weather Animations

/r/web_design monthly challenge number 1. Details can be found here: https://www.reddit.com/r/web_design/comments/6mief5/rweb_design_monthly_challenges_episode_1_css/

A Pen by ryuuseiistar on CodePen.

License.

style.scss

@mixin background($colour1, $colour2) {
  background: -webkit-linear-gradient($colour1, $colour2);
  background: -moz-linear-gradient($colour1, $colour2);
  background: -ms-linear-gradient($colour1, $colour2);
  background: -o-linear-gradient($colour1, $colour2);
  background: linear-gradient($colour1, $colour2);
}
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}
@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
  -moz-transform: rotate($degrees);
  -ms-transform: rotate($degrees);
  -o-transform: rotate($degrees);
  transform: rotate($degrees);
}
@mixin scale($points) {
  -webkit-transform: scale($points);
  -moz-transform: scale($points);
  -ms-transform: scale($points);
  -o-transform: scale($points);
  transform: scale($points);
}
@mixin fadeIn($seconds) {
  -webkit-animation: fadein $seconds;
  -moz-animation: fadein $seconds;
  -ms-animation: fadein $seconds;
  -o-animation: fadein $seconds;
  animation: fadein $seconds;
}

$white: #FFFFFF;
$skyLight: #55C1FF;
$skyDark: #33658A;
$sunLight: #FEC601;
$sunDark: #EA7317;
$cloudLight: #DBE4EE;
$cloudDark: #A9BBCF;
$darkCloudLight: #90A7BF;
$darkCloudDark: #7792AF;
$raindrop: #0A81D1;
$nightLight: #ECE4B7;
$nightDark: #BFADA3;

html {
  @include background($skyLight, $skyDark);
  min-height: 100%;
}

body {
  text-align: center;

  #weather-animations {
    display: inline-block;
    width: 50%;

    .row {
      display: flex;
      align-items: center;
      height: 200px;
      width: auto;

      .weather {
        display: inline-block;
        position: relative;
        width: 200px;
        min-width: 200px;
        height: 200px;

        .rays {
          background: $sunLight;
          position: absolute;
          z-index: 0;
          @include rotate(20deg);
          animation: sunRotate 10s infinite linear;
        }
        .rays:after {
          content: "";
          background: $sunLight;
          position: absolute;
          z-index: 0;
          @include rotate(40deg);
        }

        .sun {
          display: relative;
          @include background($sunLight, $sunDark);
          @include border-radius(50px);
          position: absolute;
          z-index: 1;
        }

        .cloud {
          @include border-radius(50px);
          position: relative;
          z-index: 2;
        }
        .cloud:before {
          content: "";
          @include border-radius(50px);
          position: absolute;
          z-index: 2;
        }
        .cloud:after {
          content: "";
          position: absolute;
          @include border-radius(50px);
          z-index: 3;
        }
        
        .raindrop {
          width: 5px;
          height: 5px;
          border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
          border: 3px solid $raindrop;
          background: $raindrop;
          display: inline-block;
          @include rotate(-45deg);
          position: relative;
          backface-visibility: hidden;
        }
        
        .star {
          margin: 50px 0;
          position: relative;
          display: block;
          width: 0px;
          height: 0px;
          border-left: 100px solid transparent;
          border-right: 100px solid transparent;
          border-bottom: 70px solid $nightLight;
          @include rotate(35deg);
          @include scale(.15);
        }
        .star:before {
          content: "";
          border-left: 30px solid transparent;
          border-right: 30px solid transparent;
          border-bottom: 80px solid $nightLight;
          position: absolute;
          height: 0;
          width: 0;
          top: -45px;
          left: -60px;
          display: block;
          @include rotate(-35deg);
        }
        .star:after {
          content: "";
          position: absolute;
          display: block;
          top: 3px;
          left: -105px;
          width: 0px;
          height: 0px;
          border-right: 100px solid transparent;
          border-bottom: 70px solid $nightLight;
          border-left: 100px solid transparent;
          @include rotate(-70deg);
        }
      }

      .desc {
        position: relative;
        color: $white;
        font-size: 30px;
        font-family: 'Pacifico', cursive;
      }
    }
  }
}

#rays {
  width: 100px;
  height: 100px;
  top: 35px;
  left: 25px;
}
#rays:after {
  height: 100px;
  width: 100px;
  top: 0px;
  left: 0px;
}
#sun {
  width: 100px;
  height: 100px;
  top: 35px;
  left: 25px;
}

#miniRays {
  width: 75px;
  height: 75px;
  top: 25px;
  left: 75px;
}
#miniRays:after {
  height: 75px;
  width: 75px;
  top: 0px;
  left: 0px;
}
#miniSun {
  width: 75px;
  height: 75px;
  top: 25px;
  left: 75px;
}
#miniCloud {
  background-color: $cloudLight;
  width: 75px;
  height: 75px;
  top: 40px;
  animation: cloudFloat 5s infinite linear;
}
#miniCloud:before {
  background-color: $cloudLight;
  width: 50px;
  height: 50px;
  top: 17px;
  left: 55px;
}
#miniCloud:after {
  @include background($cloudLight, $cloudDark);
  width: 140px;
  height: 60px;
  top: 40px;
  left: -15px;
}

#miniDarkCloud {
  background-color: $darkCloudLight;
  width: 75px;
  height: 75px;
  top: -10px;
  left: 75px;
  @include scale(0.75);
  animation: cloudFloatOpposite 5s infinite linear;
}
#miniDarkCloud:before {
  background-color: $darkCloudLight;
  width: 50px;
  height: 50px;
  top: 17px;
  left: 55px;
}
#miniDarkCloud:after {
  @include background($darkCloudLight, $darkCloudDark);
  width: 140px;
  height: 60px;
  top: 40px;
  left: -15px;
}
#cloud {
  background-color: $cloudLight;
  width: 75px;
  height: 75px;
  top: -50px;
  @include scale(1.25);
  animation: cloudFloat 5s infinite linear;
}
#cloud:before {
  background-color: $cloudLight;
  width: 50px;
  height: 50px;
  top: 17px;
  left: 55px;
}
#cloud:after {
  @include background($cloudLight, $cloudDark);
  width: 140px;
  height: 60px;
  top: 40px;
  left: -15px;
}

#raindrop1 {
  left: -72px;
  animation: raindrop 2s infinite linear, raindropFade 2s infinite linear;
}
#raindrop2 {
  left: -48px;
  animation: raindropAlt 2s infinite linear, raindropFade 2s infinite linear;
}
#raindrop3 {
  left: -24px;
  animation: raindrop 2s infinite linear, raindropFade 2s infinite linear;
}
#raindrop4 {
  left: 0px;
  animation: raindropAlt 2s infinite linear, raindropFade 2s infinite linear;
}
#darkCloud {
  background-color: $darkCloudLight;
  width: 75px;
  height: 75px;
  top: 0px;
  animation: cloudFloat 5s infinite linear;
}
#darkCloud:before {
  background-color: $darkCloudLight;
  width: 50px;
  height: 50px;
  top: 17px;
  left: 55px;
}
#darkCloud:after {
  @include background($darkCloudLight, $darkCloudDark);
  width: 140px;
  height: 60px;
  top: 40px;
  left: -15px;
}

#moon {
  width: 100px;
  height: 100px;
  top: -150px;
  left: 55px;
  @include border-radius(50px);
  position: relative;
  box-shadow: 30px 15px 0 0 $nightLight;
  @include rotate(130deg);
  animation: moonSwing 3s infinite linear;
}
#star1 {
  top: 35px;
  left: -100px;
  animation: starFadeIn 5s infinite linear;
}
#star2 {
  top: -300px;
  left: 15px;
  animation: starFadeOut 6s infinite linear;
}
#star3 {
  top: -375px;
  left: 50px;
  animation: starFadeIn 7s infinite linear;
}



@keyframes sunRotate {
  from {
    @include rotate(0deg);
  }
  to {
    @include rotate(359deg);
  }
}
@keyframes cloudFloat {
  0% {
    left: 0px;
  }
  50% {
    left: 20px;
  }
  100% {
    left: 0px;
  }
}
@keyframes cloudFloatOpposite {
  0% {
    left: 75px;
  }
  50% {
    left: 50px;
  }
  100% {
    left: 75px;
  }
}
@keyframes raindrop {
  from {
    top: 100px;
  }
  to {
    top: 175px;
  }
}
@keyframes raindropAlt {
  from {
    top: 75px;
  }
  to {
    top: 150px;
  } 
}
@keyframes raindropFade {
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes moonSwing {
  0% {
    @include rotate(125deg);
  }
  50% {
    @include rotate(135deg);
  }
  100% {
    @include rotate(125deg);
  }
}
@keyframes starFadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes starFadeOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}