Animated Weather Icons

animated-weather-icons.markdown

Animated Weather Icons

Animated Weather Icons

A Pen by martin.hsuching on CodePen.

License.

index.html

<div>
  <h1>Animated SVG Weather Icons</h1>

  <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
   <defs>
    <radialGradient id="gradYellow" cx="50%" cy="50%" r="80%" fx="90%" fy="80%">
      <stop offset="0%" style="stop-color:yellow; stop-opacity:1" />
      <stop offset="100%" style="stop-color:orange ;stop-opacity:1" />
    </radialGradient>
    <radialGradient id="gradDarkGray" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:white; stop-opacity:1" />
      <stop offset="70%" style="stop-color:gray; stop-opacity:1" />
      <stop offset="100%" style="stop-color:dimgray ;stop-opacity:1" />
    </radialGradient>
    <radialGradient id="gradGray" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:white; stop-opacity:1" />
      <stop offset="100%" style="stop-color:darkgray ;stop-opacity:1" />
    </radialGradient>
    <linearGradient id="gradWhite" x1="40%" y1="50%" x2="90%" y2="90%">
      <stop offset="0%" style="stop-color:white;stop-opacity:1" />
      <stop offset="100%" style="stop-color:darkgray;stop-opacity:1" />
    </linearGradient>     
  </defs>
  
    <!-- Sun -->
  <symbol id="sun">
    <!-- center -->
    <circle cx="50" cy="50" r="20" fill="url(#gradYellow)" />

    <!-- long rays -->
    <line x1="50" y1="27" x2="50" y2="2" class="longRay" />
    <line x1="50" y1="73" x2="50" y2="98" class="longRay" />
    <line x1="27" y1="50" x2="2" y2="50" class="longRay" />
    <line x1="73" y1="50" x2="98" y2="50" class="longRay" />
    <line x1="34" y1="34" x2="16" y2="16" class="longRay" />
    <line x1="66" y1="66" x2="84" y2="84" class="longRay" />
    <line x1="34" y1="66" x2="16" y2="84" class="longRay" />
    <line x1="66" y1="34" x2="84" y2="16" class="longRay" />

    <!-- short rays -->
    <line x1="59" y1="29" x2="66" y2="13" class="shortRay"/>
    <line x1="71" y1="42" x2="87" y2="35" class="shortRay" />
    <line x1="71" y1="58.5" x2="87" y2="65" class="shortRay" />
    <line x1="59" y1="71" x2="66" y2="87" class="shortRay" />
    <line x1="41" y1="71" x2="34" y2="87" class="shortRay" />
    <line x1="29.5" y1="58.5" x2="13" y2="66" class="shortRay" />
    <line x1="29" y1="42" x2="13" y2="35" class="shortRay" />
    <line x1="41" y1="29" x2="35" y2="13" class="shortRay" />
  </symbol>
  
  <!-- Moon -->
  <symbol id="moon">
    <path d="M60,20 A30,30 0 1,0 90,65 22,22 0 1,1 60,20z" fill="url(#gradYellow)"/>
  </symbol>

  <!-- Star -->
  <symbol id="star">
    <polygon points="5,0 2,10 10,4 0,4 8,10" style="fill:url(#gradYellow);fill-rule:nonzero;"/>
  </symbol>
    
  <!-- Small Gray Cloud -->
  <symbol id="grayCloud">
    <path  d="M20,15 Q25,0 45,11 Q60,5 60,20 A30,15 5 1,1 20,15 Z" />
  </symbol>
  
  <!-- White Cloud -->
  <symbol id="whiteCloud">
    <path fill="url(#gradWhite)" d="M11,47 Q13,37 21,42 Q31,30 41,38 A28,21 -25 1,1 35,75 Q23,85 19,73 A12,12 0 0,1 11,47Z" />
  </symbol>
  
  <!-- Rain Drop -->
  <symbol id="rainDrop">
    <path fill="lightblue" d="M10 0 Q10,0 14,7 A5,5 0 1,1 6,7 Q10,0 10,0Z" />
  </symbol>

  <!-- Rain Drizzle -->
  <symbol id="rainDrizzle">
    <line x1="20" y1="2" x2="10" y2="40" />
  </symbol>

  <!-- Thunder Bolt -->
  <symbol id="thunderBolt">
    <path fill="black" d="M15,0 L1,23 L8,23 L0,40 L15,19 L8,19Z" />
  </symbol>

  <!-- Snow Flake -->
  <symbol id="snowFlake">
    <path d="M5,0 L5,10 M0,5 L10,5 M1.5,1.5 L8.5,8.5 M8.5,1.5 L1.5,8.5" />
    <path d="M3.5,0.25 L5,2 L6.5,0.25 M3.5,9.75 L5,8 L6.5,9.75" />
    <path d="M0.25,3.5 L2,5 L0.25,6.5 M9.75,3.5 L8,5 L9.75,6.5" />
    <path d="M0.75,2.90 L2.85,2.85 L2.90,0.75 M7.25,9.35 L7.15,7.15 L9.35,7.25" />
    <path d="M0.75,7.25 L2.85,7.15 L2.90,9.35 M7.15,0.75 L7.25,2.85 L9.35,2.90" />
  </symbol>

  <!-- Hail/Ice Pellet-->
  <symbol id="icePellet">
    <circle cx="4" cy="4" r="4" fill="#e3fcff" />
  </symbol>

  <!-- Mist -->
  <symbol id="mist">
    <path d="M5,34 L43,34" />
    <path d="M10,40 L40,40 Q51.5,40 50,35 T60,30 L80,30" />
    <path d="M15,45 L45,45 Q56.5,45 55,40 T65,35 L90,35" />
    <path d="M60,42 L85,42" />
  </symbol>
  
</svg>

  <!-------------------- ICONS--------------------->
  <!-- Dark clouds -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#grayCloud" class="small-cloud" fill="url(#gradGray)"/>
      <use xlink:href="#grayCloud" x="25" y="10" class="reverse-small-cloud" fill="url(#gradDarkGray)"/>
      <use xlink:href="#whiteCloud" x="7" />
    </svg>
    <figcaption>Dark Clouds</figcaption>
  </figure>

  <!-- Few clouds -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#grayCloud" class="small-cloud" fill="url(#gradGray)"/>
      <use xlink:href="#whiteCloud" x="7" />
    </svg>
    <figcaption>Few Clouds</figcaption>
  </figure>

  <!-- Sunny -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#sun"/>
    </svg>
    <figcaption>Sunny</figcaption>
  </figure>

  <!-- Partly Cloudy Day -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#sun" x="-12" y="-18"/>
      <use xlink:href="#grayCloud" class="small-cloud" fill="url(#gradGray)"/>
      <use xlink:href="#whiteCloud" x="7" />
    </svg>
    <figcaption>Partly Cloudy Day</figcaption>
  </figure>

  <!-- Patchy Rain Day -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#sun" x="-12" y="-18"/>
      <use xlink:href="#grayCloud" class="small-cloud" fill="url(#gradGray)"/>
      <use id="drop1" xlink:href="#rainDrop" x="25" y="65"/>
      <use id="drop3" xlink:href="#rainDrop" x="45" y="65"/>
      <use xlink:href="#whiteCloud" x="7" />
    </svg>
    <figcaption>Patchy Rain Day</figcaption>
  </figure>

  <!-- Patchy Drizzle Day -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#sun" x="-12" y="-18"/>
      <use xlink:href="#grayCloud" class="small-cloud" fill="url(#gradGray)"/>
      <use xlink:href="#rainDrizzle" x="25" y="65"/>
      <use xlink:href="#rainDrizzle" x="40" y="65"/>
      <use xlink:href="#whiteCloud" x="7" />
    </svg>
    <figcaption>Patchy Drizzle Day</figcaption>
  </figure>

  <!-- Patchy Snow Day -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#sun" x="-12" y="-18"/>
      <use xlink:href="#grayCloud" class="small-cloud" fill="url(#gradGray)"/>
      <use id="snowFlake2" xlink:href="#snowFlake" x="30" y="65"/>
      <use id="snowFlake4" xlink:href="#snowFlake" x="45" y="65"/>
      <use id="snowFlake5" xlink:href="#snowFlake" x="58" y="65"/>
      <use xlink:href="#whiteCloud" x="7" />
    </svg>
    <figcaption>Patchy Snow Day</figcaption>
  </figure>

  <!-- Patchy Sleet Day -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#sun" x="-12" y="-18"/>
      <use xlink:href="#grayCloud" class="small-cloud" fill="url(#gradGray)"/>
      <use id="snowFlake2" xlink:href="#snowFlake" x="35" y="65"/>
      <use id="snowFlake4" xlink:href="#snowFlake" x="50" y="65"/>
      <use xlink:href="#rainDrizzle" x="25" y="65"/>
      <use xlink:href="#rainDrizzle" x="40" y="65"/>
      <use xlink:href="#whiteCloud" x="7" />
    </svg>
    <figcaption>Patchy Sleet Day</figcaption>
  </figure>

  <!-- Moon -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#moon" x="-15"/>
      <use xlink:href="#star" x="42" y="30" class="stars animated infinite flash"/>
      <use xlink:href="#star" x="61" y="32" class="stars animated infinite flash delay-1s"/>
      <use xlink:href="#star" x="55" y="50" class="stars animated infinite flash delay-2s"/>
    </svg>
    <figcaption>Clear Night</figcaption>
  </figure>

  <!-- Partly Cloudy Night -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#moon" x="-20" y="-15"/>
      <use xlink:href="#grayCloud" class="small-cloud" fill="url(#gradGray)"/>
      <use xlink:href="#whiteCloud" x="7" />
    </svg>
    <figcaption>Partly Cloudy Night</figcaption>
  </figure>

  <!-- Patchy Rain Night -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#moon" x="-20" y="-15"/>
      <use xlink:href="#grayCloud" class="small-cloud" fill="url(#gradGray)"/>
      <use id="drop1" xlink:href="#rainDrop" x="25" y="65"/>
      <use id="drop3" xlink:href="#rainDrop" x="45" y="65"/>
      <use xlink:href="#whiteCloud" x="7" />
    </svg>
    <figcaption>Patchy Rain Night</figcaption>
  </figure>

  <!-- Patchy Drizzle Night -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#moon" x="-20" y="-15"/>
      <use xlink:href="#grayCloud" class="small-cloud" fill="url(#gradGray)"/>
      <use xlink:href="#rainDrizzle" x="25" y="65"/>
      <use xlink:href="#rainDrizzle" x="40" y="65"/>
      <use xlink:href="#whiteCloud" x="7" />
    </svg>
    <figcaption>Patchy Drizzle Night</figcaption>
  </figure>

  <!-- Patchy Snow Night -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#moon" x="-20" y="-15"/>
      <use xlink:href="#grayCloud" class="small-cloud" fill="url(#gradGray)"/>
      <use id="snowFlake2" xlink:href="#snowFlake" x="30" y="65"/>
      <use id="snowFlake4" xlink:href="#snowFlake" x="45" y="65"/>
      <use id="snowFlake5" xlink:href="#snowFlake" x="58" y="65"/>
      <use xlink:href="#whiteCloud" x="7" />
    </svg>
    <figcaption>Patchy Snow Night</figcaption>
  </figure>

  <!-- Patchy Sleet Night -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#moon" x="-20" y="-15"/>
      <use xlink:href="#grayCloud" class="small-cloud" fill="url(#gradGray)"/>
      <use id="snowFlake2" xlink:href="#snowFlake" x="35" y="65"/>
      <use id="snowFlake4" xlink:href="#snowFlake" x="50" y="65"/>
      <use xlink:href="#rainDrizzle" x="25" y="65"/>
      <use xlink:href="#rainDrizzle" x="40" y="65"/>
      <use xlink:href="#whiteCloud" x="7" />
    </svg>
    <figcaption>Patchy Sleet Night</figcaption>
  </figure>

  <!-- Rain -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#grayCloud" x="25" y="10" class="reverse-small-cloud" fill="url(#gradDarkGray)"/>
      <use id="drop4" xlink:href="#rainDrop" x="15" y="65"/>
      <use id="drop1" xlink:href="#rainDrop" x="25" y="65"/>
      <use id="drop2" xlink:href="#rainDrop" x="37" y="65"/>
      <use id="drop3" xlink:href="#rainDrop" x="50" y="65"/>
      <use xlink:href="#whiteCloud" x="5" y="-7"/>
    </svg>
    <figcaption>Rain</figcaption>
  </figure>

  <!-- Drizzle -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#rainDrizzle" x="15" y="65"/>
      <use xlink:href="#rainDrizzle" x="25" y="65"/>
      <use xlink:href="#rainDrizzle" x="35" y="65"/>
      <use xlink:href="#rainDrizzle" x="45" y="65"/>
      <use xlink:href="#whiteCloud" x="10" y="-10"/>
    </svg>
    <figcaption>Drizzle</figcaption>
  </figure>

  <!-- Thunderstorm -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#grayCloud" class="small-cloud" fill="url(#gradGray)"/>
      <use xlink:href="#grayCloud" x="25" y="10" class="reverse-small-cloud" fill="url(#gradDarkGray)"/>
      <use xlink:href="#thunderBolt" x="30" y="61" class="lighting animated infinite flash"/>
      <use xlink:href="#whiteCloud" x="7" />
      <use xlink:href="#thunderBolt" x="45" y="56" class="lighting animated infinite flash delay-1s"/>
    </svg>
    <figcaption>Thunderstorm</figcaption>
  </figure>

  <!-- Snow -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use id="snowFlake1" xlink:href="#snowFlake" x="20" y="55"/>
      <use id="snowFlake2" xlink:href="#snowFlake" x="35" y="65"/>
      <use id="snowFlake3" xlink:href="#snowFlake" x="45" y="60"/>
      <use id="snowFlake4" xlink:href="#snowFlake" x="50" y="65"/>
      <use id="snowFlake5" xlink:href="#snowFlake" x="63" y="65"/>
      <use xlink:href="#whiteCloud" x="10" y="-15"/>
    </svg>
    <figcaption>Snow</figcaption>
  </figure>

  <!-- Sleet -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#grayCloud" x="25" y="10" class="reverse-small-cloud" fill="url(#gradDarkGray)"/>
      <use id="snowFlake1" xlink:href="#snowFlake" x="20" y="55"/>
      <use id="snowFlake2" xlink:href="#snowFlake" x="35" y="65"/>
      <use id="snowFlake3" xlink:href="#snowFlake" x="45" y="60"/>
      <use id="snowFlake4" xlink:href="#snowFlake" x="50" y="65"/>
      <use id="snowFlake5" xlink:href="#snowFlake" x="63" y="65"/>
      <use xlink:href="#rainDrizzle" x="15" y="65"/>
      <use xlink:href="#rainDrizzle" x="25" y="65"/>
      <use xlink:href="#rainDrizzle" x="35" y="65"/>
      <use xlink:href="#rainDrizzle" x="45" y="65"/>
      <use xlink:href="#whiteCloud" x="5" y="-7"/>
    </svg>
    <figcaption>Sleet</figcaption>
  </figure>

  <!-- Hail/Ice Pellets -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#grayCloud" x="25" y="10" class="reverse-small-cloud" fill="url(#gradDarkGray)"/>
      <use id="ice4" xlink:href="#icePellet" x="25" y="65"/>
      <use id="ice1" xlink:href="#icePellet" x="35" y="65"/>
      <use id="ice2" xlink:href="#icePellet" x="47" y="65"/>
      <use id="ice3" xlink:href="#icePellet" x="60" y="65"/>
      <use xlink:href="#whiteCloud" x="5" y="-7"/>
    </svg>
    <figcaption>Hail/Ice Pellets</figcaption>
  </figure>

  <!-- Mist Cloud -->
  <figure>
    <svg class="icon" viewbox="0 0 100 100">
      <use xlink:href="#grayCloud" class="small-cloud" fill="url(#gradDarkGray)" x="0" y="20"/>
      <use xlink:href="#grayCloud" x="30" y="30" class="reverse-small-cloud" fill="url(#gradGray)"/>
      <use id="mist" xlink:href="#mist" x="0" y="30"/>
    </svg>
    <figcaption>Mist/Fog</figcaption>
  </figure>

  <footer>
    Designed and coded by<br>
    <a target="_blank" href="https://s.codepen.io/atiyahaider/debug/oaZxeb/dGrXWdOKgPWM">Atiya Haider</a>
  </footer>
</div>

style.css

body {
  background-color: #3286e7;
  font-family: 'Roboto', sans-serif;
}

div {
  margin: 5% auto;
  text-align: center;
  color: white;
  height: 100vh;
}

h1 {
  padding: 20px 0;  
  font-weight: 300;
}

.icon {
  width: 100px;
  height: 100px;
}

figure {
  display: inline-block;
  font-weight: 300;
}

.longRay {
  stroke: #ffdd1a;
  stroke-width: 3;
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  -webkit-animation: longRayAnimation 4s linear infinite;
  animation: longRayAnimation 4s linear infinite;
}

@keyframes longRayAnimation {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes longRayAnimation {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.shortRay {
  stroke: #ffdd1a;
  stroke-width: 1.5;
  stroke-dasharray: 3;
  stroke-dashoffset: 1;
  -webkit-animation: shortRayAnimation 3s linear infinite;
  animation: shortRayAnimation 3s linear infinite;
}

@-webkit-keyframes shortRayAnimation {
  from {
    stroke-dashoffset: 20;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes shortRayAnimation {
  from {
    stroke-dashoffset: 20;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.small-cloud {
  -webkit-animation: float 8s linear infinite;
  animation: float 8s linear infinite;
}

@-webkit-keyframes float {
  0% {
    -webkit-transform: translate(0px, 15px);
    opacity: 0.75;
  }
  25% {
    -webkit-transform: translate(15px, 0px);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(30px, 0px);
    opacity: 1;
  }
  75% {
    -webkit-transform: translate(25px, 0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0px, 15px);
    opacity: 0.75;
  }
}
@keyframes float {
  0% {
    -ms-transform: translate(0px, 15px);
    transform: translate(0px, 15px);
    opacity: 0.75;
  }
  25% {
    -ms-transform: translate(15px, 0px);
    transform: translate(15px, 0px);
    opacity: 1;
  }
  50% {
    -ms-transform: translate(30px, 0px);
    transform: translate(30px, 0px);
    opacity: 1;
  }
  75% {
    -ms-transform: translate(25px, 0px);
    transform: translate(25px, 0px);
    opacity: 1;
  }
  100% {
    -ms-transform: translate(0px, 15px);
    transform: translate(0px, 15px);
    opacity: 0.75;
  }
}

.reverse-small-cloud {
  -webkit-animation: reverse-float 6s linear infinite;
  animation: reverse-float 6s linear infinite;
}

@-webkit-keyframes reverse-float {
  0% {
    -webkit-transform: translate(0px, -15px);
    opacity: 0.75;
  }
  25% {
    -webkit-transform: translate(-15px, 0px);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(-30px, 0px);
    opacity: 1;
  }
  75% {
    -webkit-transform: translate(-25px, 0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0px, -15px);
    opacity: 0.75;
  }
}
@keyframes reverse-float {
  0% {
    -ms-transform: translate(0px, -15px);
    transform: translate(0px, -15px);
    opacity: 0.75;
  }
  25% {
    -ms-transform: translate(-15px, 0px);
    transform: translate(-15px, 0px);
    opacity: 1;
  }
  50% {
    -ms-transform: translate(-30px, 0px);
    transform: translate(-30px, 0px);
    opacity: 1;
  }
  75% {
    -ms-transform: translate(-25px, 0px);
    transform: translate(-25px, 0px);
    opacity: 1;
  }
  100% {
    -ms-transform: translate(0px, -15px);
    transform: translate(0px, -15px);
    opacity: 0.75;
  }
}

#drop1 {
  -webkit-animation: rain 1s linear infinite;
  animation: rain 1s linear infinite;
}

#drop3 {
  -webkit-animation: rain 1s linear infinite 0.5s;
  animation: rain 1s linear infinite 0.5s;
}

#drop2 {
  -webkit-animation: rain 2s linear infinite 1s;
  animation: rain 2s linear infinite 1s;
}

#drop4 {
  -webkit-animation: rain 2s linear infinite 0.8s;
  animation: rain 2s linear infinite 0.8s;
}

@-webkit-keyframes rain {
  0% {
    opacity: 1;
  }
  25% {
    -webkit-transform: translateY(5px);
    opacity: 1;
  }
  50% {
    -webkit-transform: translateY(15px);
    opacity: 1;
  }
  75% {
    -webkit-transform: translateY(25px);
    opacity: 0.75;
  }
  100% {
    -webkit-transform: translateY(35px);
    opacity: 0;
  }
}
@keyframes rain {
  0% {
    opacity: 1;
  }
  25% {
    -ms-transform: translateY(5px);
    transform: translateY(5px);
    opacity: 1;
  }
  50% {
    -ms-transform: translateY(15px);
    transform: translateY(15px);
    opacity: 1;
  }
  75% {
    -ms-transform: translateY(25px);
    transform: translateY(25px);
    opacity: 0.75;
  }
  100% {
    -ms-transform: translateY(35px);
    transform: translateY(35px);
    opacity: 0;
  }
}

#rainDrizzle {
  stroke: lightblue;
  stroke-width: 1;
  stroke-dasharray: 3;
  stroke-dashoffset: 1;
  -webkit-animation: drizzle 5s linear infinite;
  animation: drizzle 5s linear infinite;
}

@-webkit-keyframes drizzle {
  from {
    stroke-dashoffset: 40;
  }
  to {
    stroke-dashoffset: 10;
  }
}
@keyframes drizzle {
  from {
    stroke-dashoffset: 40;
  }
  to {
    stroke-dashoffset: 10;
  }
}

.lighting {
  animation-duration: 2.5s;
}

#snowFlake {
  fill: none;
  stroke: white;
  stroke-width: 0.6;
}

#snowFlake1 {
  -webkit-animation: snow 4s linear infinite;
  animation: snow 4s linear infinite;
}

#snowFlake2 {
  -webkit-animation: snow 3s linear infinite 0.8s;
  animation: snow 3s linear infinite 0.8s;
}

#snowFlake3 {
  -webkit-animation: snow 5s linear infinite 0.5s;
  animation: snow 5s linear infinite 0.5s;
}

#snowFlake4 {
  -webkit-animation: snow 6s linear infinite 1s;
  animation: snow 6s linear infinite 1s;
}

#snowFlake5 {
  -webkit-animation: snow 4s linear infinite 0.6s;
  animation: snow 4s linear infinite 0.6s;
}

@-webkit-keyframes snow {
  0% {
    -webkit-transform: translate(5px, 0px);
    opacity: 1;
  }
  25% {
    -webkit-transform: translate(0px, 10px);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(7px, 20px);
    opacity: 1;
  }
  75% {
    -webkit-transform: translate(0px, 30px);
    opacity: 0.75;
  }
  100% {
    -webkit-transform: translate(10px, 40px);
    opacity: 0.5;
  }
}
@keyframes snow {
  0% {
    -ms-transform: translate(5px, 0px);
    transform: translate(5px, 0px);
    opacity: 1;
  }
  25% {
    -ms-transform: translate(0px, 10px);
    transform: translate(0px, 10px);
    opacity: 1;
  }
  50% {
    -ms-transform: translate(7px, 20px);
    transform: translate(7px, 20px);
    opacity: 1;
  }
  75% {
    -ms-transform: translate(0px, 30px);
    transform: translate(0px, 30px);
    opacity: 0.75;
  }
  100% {
    -ms-transform: translate(10px, 40px);
    transform: translate(10px, 40px);
    opacity: 0.5;
  }
}

#ice1 {
  -webkit-animation: ice 1s linear infinite;
  animation: ice 1s linear infinite;
}

#ice3 {
  -webkit-animation: ice 1s linear infinite 0.5s;
  animation: ice 1s linear infinite 0.5s;
}

#ice2 {
  -webkit-animation: ice 2s linear infinite 1s;
  animation: ice 2s linear infinite 1s;
}

#ice4 {
  -webkit-animation: ice 2s linear infinite 0.8s;
  animation: ice 2s linear infinite 0.8s;
}

@-webkit-keyframes ice {
  0% {
    opacity: 1;
  }
  25% {
    -webkit-transform: translateY(5px);
    opacity: 1;
  }
  50% {
    -webkit-transform: translateY(15px);
    opacity: 1;
  }
  75% {
    -webkit-transform: translateY(25px);
    opacity: 0.75;
  }
  100% {
    -webkit-transform: translateY(35px);
    opacity: 0;
  }
}
@keyframes ice {
  0% {
    opacity: 1;
  }
  25% {
    -ms-transform: translateY(5px);
    transform: translateY(5px);
    opacity: 1;
  }
  50% {
    -ms-transform: translateY(15px);
    transform: translateY(15px);
    opacity: 1;
  }
  75% {
    -ms-transform: translateY(25px);
    transform: translateY(25px);
    opacity: 0.75;
  }
  100% {
    -ms-transform: translateY(35px);
    transform: translateY(35px);
    opacity: 0;
  }
}

#mist {
  fill: none;
  stroke: #333333;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: misty 5s linear infinite alternate;
}

@keyframes misty {
 from {
   x: -10px;
  }
  to {
    x: 17px;
  }
}

.stars {
  animation-duration: 3s;
}

footer {
  text-align: right;
  margin-top: 20px;
  margin-right: 20px;
  font-size: 0.95em;
 }

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />