HTML5/CSS3 Transition Animation for the Change of Seasons

HTML5/CSS3 Transition Animation for the Change of Seasons: BY Jose15 Jan,2021; Tags:
HTML5 Animation

Introduction

This time we bring a transition animation effects based on HTML5 and CSS3 seasons, a simple forest scene along with the spring, summer, autumn and winter seasons change, each season shows their own beautiful scenery, very good.

HTML5/CSS3 Transition Animation for the Change of Seasons

Instructions

HTML Body Code

<div class="cloud">
      <div class="weather-container">
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
        <div class="rain"></div>
      </div>
    </div>

Css Code

.container {
  position: relative;
  width: 800px;
  height: 450px;
}

.sun {
  background-color: var(--sun);
  width: 60px;
  height: 60px;
  border-radius: 100%;
  top: -20px;
  left: 180px;
}

.rainbow {
  visibility: hidden;
  width: 600px;
  height: 270px;
  left: 100px;
  bottom: 82px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.rainbow.animated {
  -webkit-animation: rainbow 14s linear;
          animation: rainbow 14s linear;
  visibility: visible;
}

Js Code

function updateSeasons() {
  html.style.setProperty("--bgd-color", backgroundColours[c]);
  html.style.setProperty("--light", lightColours[c]);
  html.style.setProperty("--medium", mediumColours[c]);
  html.style.setProperty("--dark", darkColours[c]);
  html.style.setProperty("--bush", bushColours[c]);
  html.style.setProperty("--cloud", cloudColours[c]);
  season = seasons[c];

  snow.forEach(function (el) {
    season !== seasons[0] ? el.style.display = "none" : el.style.display = "block";
  });

  if (season === seasons[0] || season === seasons[2]) {
    rabbit.classList.add("animated");
  } else {
    rabbit.classList.remove("animated");
  }

  season === seasons[1] ? rainbow.classList.add("animated") : rainbow.classList.remove("animated");
  if (season === seasons[1]) {
    html.style.setProperty("--rabbit", "#9E6255");
  }

  flowers.forEach(function (el) {
    season === seasons[1] ? el.classList.add("animated") : el.classList.remove("animated");
  });

  if (season === seasons[2]) {
    html.style.setProperty("--sun", "#ffb53a");
    html.style.setProperty("--rabbit", "#9E6255");
  } else {
    html.style.setProperty("--sun", "transparent");
    html.style.setProperty("--rabbit", "#ffffff");
  }

  rain.forEach(function (el) {
    season === seasons[3] ? el.style.display = "block" : el.style.display = "none";
  });

  c = (c + 1) % seasons.length;
}

VIEW NOW