CodePen Embed - Animated CSS Seasons

.container
  .season
  .sun
  .rainbow
    - for (var i = 1; i <= 7; i++)
      .rainbow-colour
  .cloud-group
    - for (var i = 1; i <= 8; i++)
      .cloud
        .weather-container
          - for (var j = 1; j <= 20; j++)
            .snow
          - for (var k = 1; k <= 30; k++)
            .rain
  .base
    .bush-group
      - for (var i = 1; i <= 9; i++)
        .bush
    .rabbit.animated
      .head
        .ear
        .ear
    .tree-group
      .tree
        .trunk
        .tree-top
      .tree
        .trunk
        .tree-top
      .tree
        .trunk
        .tree-top
      .tree
        .trunk
        - for (var i = 1; i <= 12; i++)
          .branch
      .tree
        .trunk
        .tree-top
        .tree-top
        .branch-two
          .tree-top
        .branch-two
          .tree-top
        .branch-two
          .tree-top
      .tree
        .trunk
        .tree-top
      .tree
        .trunk
        .tree-top
      .tree
        .trunk
        .tree-top
          - for (var i = 1; i <= 20; i++)
            .cone
        .tree-top
        .tree-top
        .flower
          .flower-in
          .petal
          .petal
          .petal
        .flower
          .flower-in
          .petal
          .petal
          .petal
      .tree
        .trunk
        .tree-top 
      .tree
        .trunk
        - for (var i = 1; i <= 10; i++)
          .branch
            .branch-in
            .pine-cone-row
              - for (var j = 1; j <= 7; j++)
                .pine-cone
      .tree
        .trunk
        .tree-top
        .tree-top
        .tree-top
      .tree
        .trunk  
        .tree-top
          - for (var i = 1; i <= 20; i++)
            .cone 
        .tree-top
        .tree-top
        .flower
          .flower-in
          .petal
          .petal
          .petal
        .flower
          .flower-in
          .petal
          .petal
          .petal
      .tree
        .trunk
        .tree-top 
        .tree-top
        .tree-top
        .branch-two
          .tree-top
        .branch-two
          .tree-top
      .tree
        .trunk
        .tree-top
          - for (var i = 1; i <= 20; i++)
            .cone 
        .tree-top
          - for (var i = 1; i <= 20; i++)
            .cone 
        .tree-top
          - for (var i = 1; i <= 20; i++)
            .cone 
      .tree
        .trunk
        .tree-top
          - for (var i = 1; i <= 20; i++)
            .cone       
        .tree-top
          - for (var i = 1; i <= 20; i++)
            .cone        
        .tree-top
          - for (var i = 1; i <= 40; i++)
            .cone

View Compiled

:root {
 --bgd-color: #cbe9f4;
 --light: #93d5eb;
 --medium: #66bbd8;
 --dark: #4da2bb;
 --bush: #ffffff;
 --trunk: #c2653c;
 --trunk2: #9d5d5d;
 --cloud: #ffffff;
 --sun: transparent;
 --rabbit: #ffffff;
 //9E6255
}

*,
*:before,
*:after {
 transition: 4s ease background;
 position: absolute;
}

body {
 padding: 0;
 margin: 0;
 overflow: hidden;
 background-color: var(--bgd-color);
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
 width: 100vw;
}
.container {
 position: relative;
 width: 800px;
 height: 450px;

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

//rainbow
.rainbow {
 visibility: hidden;
 width: 600px;
 height: 270px;
 left: 100px;
 bottom: 82px;
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 &.animated {
  animation: rainbow 14s linear;
  visibility: visible;
 }
 .rainbow-colour {
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  border-bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  transform-origin: 0 100%;
  bottom: 0;
  border-bottom: 0 !important;
 }
 .rainbow-colour:nth-child(1) {
  border: 10px solid #ac01fd;
  height: 100%;
  width: 100%;
 }
 .rainbow-colour:nth-child(2) {
  border: 10px solid #511ce0;
  height: 261px;
  width: 581px;
 }
 .rainbow-colour:nth-child(3) {
  border: 10px solid #1a9fe2;
  height: 252px;
  width: 562px;
 }
 .rainbow-colour:nth-child(4) {
  border: 10px solid #5ed81d;
  height: 243px;
  width: 543px;
 }
 .rainbow-colour:nth-child(5) {
  border: 10px solid #f8f52a;
  height: 234px;
  width: 524px;
 }
 .rainbow-colour:nth-child(6) {
  border: 10px solid #f7a528;
  height: 225px;
  width: 505px;
 }
 .rainbow-colour:nth-child(7) {
  border: 10px solid #f63b2a;
  height: 216px;
  width: 486px;
 }
}

@keyframes rainbow {
 0% {
  opacity: 0;
 }
 10% {
  opacity: 0.5;
 }
 80% {
  opacity: 0.5;
 }
 100% {
  opacity: 0;
 }
}
//clouds
.cloud-group {
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 overflow: hidden;
}
.cloud {
 background-color: var(--cloud);
 width: 80px;
 height: 30px;
 border-radius: 50px;
 left: 50px;
 top: 40px;
 animation: clouds 10s linear infinite;
}

@keyframes clouds {
 50% {
  transform: translateX(20px);
 }
 100% {
  transform: translateX(0);
 }
}
.weather-container {
 width: 100%;
 height: 400px;
 // border: 1px solid #000;
}
.snow {
 opacity: 0;
 background-color: #ffffff;
 width: 6px;
 height: 6px;
 border-radius: 100%;
 transition: 2s ease all;
 animation: snow 5s linear infinite;
}
@for $i from 1 through (20) {
 $top: random(30)+px;
 $left: random(70)+px;
 .snow:nth-of-type(#{$i}) {
  top: $top;
  left: $left;
  animation-delay: random(10) + s;
 }
}

.rain {
 opacity: 0;
 display: none;
 background-color: #eaf9fe;
 width: 4px;
 height: 8px;
 transform: rotate(-30deg);
 border-color: #eaf9fe;
 border-top-left-radius: 50%;
 border-bottom-left-radius: 50%;
 border-bottom-right-radius: 50%;
 transition: 2s ease all;
 animation: drops 1s linear infinite;
}
$height: 200px;
$width: 70px;
@for $i from 1 through 30 {
 .rain:nth-child(#{$i}) {
  top: random(30) + px;
  left: random($width) + px;
  animation-delay: 0.1s * $i;
 }
}

@keyframes drops {
 0% {
  opacity: 0;
  transform: translate3d(0, 0, 0);
 }
 5% {
  opacity: 1;
 }
 80% {
  opacity: 1;
 }
 100% {
  transform: translate3d(20px, $height, 0);
  opacity: 0;
 }
}
@keyframes snow {
 0% {
  margin-top: 0px;
  opacity: 0;
 }
 5% {
  opacity: 1;
 }
 50% {
  opacity: 1;
  margin-left: 20px;
 }
 100% {
  margin-top: 200px;
  opacity: 0;
 }
}
.cloud:nth-child(2) {
 left: 70px;
 top: 65px;
 width: 90px;
}
.cloud:nth-child(3) {
 left: 330px;
 top: 30px;
 width: 80px;
 height: 25px;
}
.cloud:nth-child(4) {
 left: 290px;
 top: 60px;
 width: 90px;
}
.cloud:nth-child(5) {
 left: 480px;
 top: 40px;
 width: 100px;
}
.cloud:nth-child(6) {
 left: 580px;
 top: 80px;
}
.cloud:nth-child(7) {
 left: 520px;
 top: 105px;
 width: 110px;
}
.cloud:nth-child(8) {
 left: 660px;
 top: 160px;
 width: 70px;
}

//bush
.base {
 width: 650px;
 height: 20px;
 left: 80px;
 background-color: var(--bush);
 border-radius: 20px;
 bottom: 50px;
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
}
.bush-group {
 width: 100%;
 height: 100%;
 bottom: 5px;
 left: 0;
}
.bush {
 z-index: 100;
 width: 90px;
 height: 40px;
 bottom: 0px;
 left: 0;
 background-color: var(--bush);
 border-radius: 50px 50px 0 0;
}
.bush:nth-child(2) {
 left: 70px;
}
.bush:nth-child(3) {
 left: 140px;
}
.bush:nth-child(4) {
 left: 210px;
}
.bush:nth-child(5) {
 left: 280px;
}
.bush:nth-child(6) {
 left: 350px;
}
.bush:nth-child(7) {
 left: 420px;
}
.bush:nth-child(8) {
 left: 490px;
}
.bush:nth-child(9) {
 left: 560px;
}

//trees
.tree-group {
 width: 100%;
 height: 350px;
 bottom: 0px;
 left: 0;
}
.tree {
 z-index: 1;
 bottom: 10px;
 width: 5px;
 height: 50px;
 left: 10px;
 .tree-top {
  background-color: var(--dark);
  border-radius: 100%;
  top: -30px;
  width: 40px;
  height: 40px;
  left: -20px;
  &:after {
   content: "";
   position: absolute;
   width: 80%;
   height: 80%;
   top: 5%;
   right: 5%;
   background-color: var(--medium);
   border-radius: 100%;
  }
 }
 .trunk {
  background-color: var(--trunk);
  width: 100%;
  height: 100%;
  border-radius: 10px;
 }
}
.tree:nth-child(1),
.tree:nth-child(2),
.tree:nth-child(3),
.tree:nth-child(6),
.tree:nth-child(7),
.tree:nth-child(8),
.tree:nth-child(11),
.tree:nth-child(12) {
 .trunk {
  background-color: var(--trunk2);
 }
}
.branch {
 z-index: -1;
 height: 10px;
 width: 40px;
 border-radius: 10px;
 background-color: var(--dark);
 transform: rotate(30deg);
 transform-origin: 0% 0%;
 left: 5px;
}
.branch-two {
 top: 70px;
 height: 20px;
 width: 40px;
 border-radius: 0 0 20px 0;
 border: 7px solid var(--trunk);
 border-left: 0;
 border-top: 0;
 .tree-top {
  width: 50px;
  height: 20px;
  top: -10px;
  left: 20px;
 }
}

// tree 2
.tree:nth-child(2) {
 left: 40px;
 height: 70px;
 width: 6px;
 z-index: 2;
 .tree-top {
  background-color: var(--medium);
  top: -35px;
  width: 50px;
  height: 50px;
  left: -23px;
  &:after {
   background-color: var(--light);
  }
 }
}

// tree 3
.tree:nth-child(3) {
 left: 80px;
 height: 50px;
 .tree-top {
  background-color: var(--medium);
  top: -15px;
  width: 30px;
  height: 30px;
  left: -13px;
  &:after {
   background-color: var(--light);
  }
 }
}

//tree 4
.tree:nth-child(4) {
 z-index: 1;
 left: 105px;
 height: 220px;
 width: 10px;
 .branch {
  &:before {
   content: "";
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: var(--medium);
   border-radius: 10px;
  }
  &:after {
   z-index: 1;
   content: "";
   left: 0;
   top: 0;
   width: 66%;
   height: 100%;
   background-color: var(--light);
   border-radius: 10px;
  }
 }

 .branch:nth-child(7),
 .branch:nth-child(8),
 .branch:nth-child(9),
 .branch:nth-child(10),
 .branch:nth-child(11),
 .branch:nth-child(12) {
  transform: rotate(150deg);
  top: 7px;
  left: 10px;
 }

 .branch:first-child {
  top: 0px;
  width: 40px;
 }

 .branch:nth-child(5),
 .branch:nth-child(6),
 .branch:nth-child(11),
 .branch:nth-child(12) {
  &:before {
   width: 66%;
  }
  &:after {
   width: 33%;
  }
 }

 .branch:nth-child(3),
 .branch:nth-child(4),
 .branch:nth-child(9),
 .branch:nth-child(10) {
  &:before {
   width: 100%;
  }
  &:after {
   width: 55%;
  }
 }

 .branch:nth-child(2) {
  top: 25px;
  width: 50px;
 }
 .branch:nth-child(3) {
  top: 50px;
  width: 60px;
 }
 .branch:nth-child(4) {
  top: 75px;
  width: 70px;
 }
 .branch:nth-child(5) {
  top: 100px;
  width: 80px;
 }
 .branch:nth-child(6) {
  top: 125px;
  width: 90px;
 }
 .branch:nth-child(7) {
  top: 8px;
  width: 40px;
 }
 .branch:nth-child(8) {
  top: 33px;
  width: 50px;
 }
 .branch:nth-child(9) {
  top: 58px;
  width: 60px;
 }
 .branch:nth-child(10) {
  top: 83px;
  width: 70px;
 }
 .branch:nth-child(11) {
  top: 108px;
  width: 80px;
 }
 .branch:nth-child(12) {
  top: 133px;
  width: 90px;
 }
}
// tree 5
.tree:nth-child(5) {
 left: 140px;
 height: 280px;
 width: 12px;

 .tree-top {
  z-index: 3;
  background-color: var(--medium);
  top: -25px;
  width: 120px;
  height: 40px;
  left: -55px;
  border-radius: 50px;
  &:after {
   border-radius: 50px 50px 0 0px;
   background-color: var(--light);
   width: 100%;
   left: 0;
   height: 50%;
   top: 0;
  }
 }

 .branch-two:nth-child(5) {
  top: 38px;
  height: 5px;
  width: 60px;
  border-radius: 0 0 20px 0;
  border: 8px solid var(--trunk);
  border-left: 0;
  border-top: 0;
  .tree-top {
   width: 50px;
   height: 20px;
   top: -20px;
   left: 40px;
  }
 }
 .branch-two:nth-child(6) {
  .tree-top {
   width: 50px;
   height: 15px;
   top: -10px;
   left: 20px;
  }
 }
 .branch-two:nth-child(4) {
  top: 40px;
  height: 10px;
  width: 30px;
  border-radius: 0 0 0px 20px;
  border: 8px solid var(--trunk);
  border-right: 0;
  border-top: 0;
  left: -30px;
  .tree-top {
   width: 40px;
   height: 15px;
   top: -10px;
   left: -25px;
  }
 }
 .tree-top:nth-child(2) {
  width: 90px;
  top: -55px;
  height: 30px;
  left: -40px;
 }
}

// tree 6
.tree:nth-child(6) {
 left: 180px;
 height: 100px;
 width: 8px;
 z-index: 4;
 .tree-top {
  background-color: var(--dark);
  top: -50px;
  width: 80px;
  height: 80px;
  left: -35px;
  &:after {
   background-color: var(--medium);
  }
 }
}

// tree 7
.tree:nth-child(7) {
 left: 210px;
 height: 70px;

 .tree-top {
  background-color: var(--medium);
  top: -20px;
  width: 40px;
  height: 40px;
  left: -20px;
  &:after {
   background-color: var(--light);
  }
 }
}

// tree 8
.tree:nth-child(8) {
 left: 250px;
 height: 120px;
 width: 12px;
 z-index: 3;
 .tree-top {
  background-color: var(--light);
  top: -60px;
  width: 130px;
  height: 65px;
  left: -60px;
  border-radius: 50px;
  &:after {
   border-radius: 50px 0 0 50px;
   background-color: var(--medium);
   width: 50%;
   left: 0;
   height: 100%;
   top: 0;
  }
 }
 .tree-top:nth-child(2) {
  top: -95px;
  width: 90px;
  height: 55px;
  left: -40px;
  &:after {
   left: 0;
   height: 100%;
   top: 0;
  }
 }
 .tree-top:nth-child(3) {
  top: -120px;
  width: 46px;
  height: 40px;
  left: -18px;
  &:after {
   left: 0;
   height: 100%;
   top: 0;
  }
 }
}

// tree 9
.tree:nth-child(9) {
 left: 310px;
 height: 60px;
 .tree-top {
  background-color: var(--medium);
  top: -13px;
  width: 30px;
  height: 30px;
  left: -13px;
  &:after {
   background-color: var(--light);
  }
 }
}

// tree 10
.tree:nth-child(10) {
 left: 340px;
 height: 290px;
 width: 10px;
 z-index: 2;
 .branch {
  height: 10px;
  width: 40px;
  background-color: var(--trunk);
  left: 5px;
  top: -1px;
 }
 .branch-in {
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: var(--trunk);
  border-radius: 10px;
 }

 .branch:nth-child(7),
 .branch:nth-child(8),
 .branch:nth-child(9),
 .branch:nth-child(10),
 .branch:nth-child(11) {
  transform: rotate(150deg);
  top: 7px;
  left: 10px;
 }

 .branch:nth-child(2) {
  top: 0px;
  width: 40px;
 }

 .branch:nth-child(3) {
  top: 40px;
  width: 50px;
 }
 .branch:nth-child(4) {
  top: 80px;
  width: 60px;
 }
 .branch:nth-child(5) {
  top: 120px;
  width: 70px;
 }
 .branch:nth-child(6) {
  top: 160px;
  width: 80px;
 }
 .branch:nth-child(7) {
  top: 8px;
  width: 40px;
 }
 .branch:nth-child(8) {
  top: 48px;
  width: 50px;
 }
 .branch:nth-child(9) {
  top: 88px;
  width: 60px;
 }
 .branch:nth-child(10) {
  top: 168px;
  width: 70px;
 }
 .branch:nth-child(11) {
  top: 128px;
  width: 80px;
 }
 .pine-cone {
  height: 25px;
  width: 10px;
  top: 5px;
  left: 15px;
  border-radius: 0 0 10px 10px;
  background-color: var(--light);
  transform: rotate(-30deg);
 }
 .pine-cone:nth-child(2n + 2) {
  background-color: var(--medium);
 }
 .pine-cone:nth-child(3n + 3) {
  background-color: var(--dark);
 }

 .branch:nth-child(7),
 .branch:nth-child(8),
 .branch:nth-child(9),
 .branch:nth-child(10),
 .branch:nth-child(11) {
  .pine-cone {
   transform: rotate(210deg);
   left: 16px;
   top: -20px;
  }
  $left: 16px;
  @for $i from 1 through (12) {
   .pine-cone:nth-child(#{$i}) {
    left: $left;
   }
   $left: $left + 10px;
  }
 }
 $left: 15px;
 @for $i from 1 through (12) {
  .pine-cone:nth-child(#{$i}) {
   left: $left;
  }
  $left: $left + 10px;
 }
 .branch:nth-child(2),
 .branch:nth-child(7) {
  .pine-cone:nth-child(4),
  .pine-cone:nth-child(5),
  .pine-cone:nth-child(6),
  .pine-cone:nth-child(7) {
   display: none;
  }
 }
 .branch:nth-child(3),
 .branch:nth-child(8) {
  .pine-cone:nth-child(5),
  .pine-cone:nth-child(6),
  .pine-cone:nth-child(7) {
   display: none;
  }
 }
 .branch:nth-child(4),
 .branch:nth-child(9) {
  .pine-cone:nth-child(6),
  .pine-cone:nth-child(7) {
   display: none;
  }
 }
 .branch:nth-child(5),
 .branch:nth-child(6),
 .branch:nth-child(10),
 .branch:nth-child(11) {
  .pine-cone:nth-child(7) {
   display: none;
  }
 }
}

// tree 11
.tree:nth-child(11) {
 z-index: 3;
 left: 390px;
 height: 80px;
 width: 8px;
 .tree-top {
  background-color: var(--light);
  top: -30px;
  width: 80px;
  height: 40px;
  left: -35px;
  border-radius: 50px;
  &:after {
   border-radius: 50px 0 0 50px;
   background-color: var(--medium);
   width: 50%;
   left: 0;
   height: 100%;
   top: 0;
  }
 }
 .tree-top:nth-child(2) {
  top: -50px;
  width: 60px;
  height: 30px;
  left: -25px;
 }
 .tree-top:nth-child(3) {
  top: -65px;
  width: 40px;
  height: 30px;
  left: -15px;
 }
}

// tree 12
.tree:nth-child(12) {
 left: 430px;
 height: 130px;
 width: 10px;
 .tree-top {
  background-color: var(--medium);
  top: -50px;
  width: 130px;
  height: 55px;
  left: -60px;
  border-radius: 50px;
  &:after {
   border-radius: 50px 0 0 50px;
   background-color: var(--dark);
   width: 50%;
   left: 0;
   height: 100%;
   top: 0;
  }
 }
 .tree-top:nth-child(2) {
  top: -85px;
  width: 90px;
  height: 45px;
  left: -40px;
 }
 .tree-top:nth-child(3) {
  top: -110px;
  width: 50px;
  height: 40px;
  left: -20px;
 }
 .flower:nth-child(6) {
  top: -70px;
  left: 22px;
 }
 .flower:nth-child(5) {
  top: -30px;
  left: -30px;
 }
}

// tree 13
.tree:nth-child(13) {
 z-index: 3;
 left: 480px;
 height: 70px;
 width: 12px;
 .tree-top {
  z-index: 3;
  background-color: var(--medium);
  top: -25px;
  width: 90px;
  height: 30px;
  left: -40px;
  border-radius: 50px;
  &:after {
   border-radius: 50px 50px 0 0px;
   background-color: var(--light);
   width: 100%;
   left: 0;
   height: 50%;
   top: 0;
  }
 }
 .tree-top:nth-child(2) {
  z-index: 2;
  top: -50px;
  width: 70px;
  height: 25px;
  left: -30px;
 }
 .tree-top:nth-child(3) {
  z-index: 1;
  top: -70px;
  width: 50px;
  height: 20px;
  left: -20px;
 }
 .branch-two:nth-child(5) {
  top: 23px;
  height: 5px;
  width: 30px;
  border-radius: 0 0 20px 0;
  border: 6px solid var(--trunk);
  border-left: 0;
  border-top: 0;
  .tree-top {
   width: 40px;
   height: 14px;
   top: -13px;
   left: 15px;
  }
 }
 .branch-two:nth-child(6) {
  top: 17px;
  height: 5px;
  width: 20px;
  border-radius: 0 0 0px 20px;
  border: 6px solid var(--trunk);
  border-right: 0;
  border-top: 0;
  left: -20px;
  .tree-top {
   width: 24px;
   height: 10px;
   top: -10px;
   left: -14px;
  }
 }
}

// tree 14
.tree:nth-child(14),
.tree:nth-child(15) {
 z-index: 2;
 left: 550px;
 height: 120px;
 width: 7px;
 .tree-top {
  z-index: 1;
  background-color: var(--dark);
  top: -40px;
  width: 100px;
  height: 90px;
  left: -45px;
  border-radius: 0;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  &:after {
   content: none;
  }
 }
 .tree-top:nth-child(2) {
  z-index: 2;
  background-color: var(--medium);
  top: -60px;
  width: 80px;
  height: 70px;
  left: -37px;
 }
 .tree-top:nth-child(3) {
  z-index: 3;
  background-color: var(--light);
  top: -75px;
  width: 60px;
  height: 50px;
  left: -27px;
 }
}

// tree 15
.tree:nth-child(15) {
 left: 600px;
 height: 80px;
 .tree-top {
  top: -40px;
  width: 80px;
  height: 70px;
  left: -37px;
 }
 .tree-top:nth-child(2) {
  top: -60px;
  width: 65px;
  height: 60px;
  left: -30px;
 }
 .tree-top:nth-child(3) {
  top: -70px;
  width: 50px;
  height: 40px;
  left: -22px;
 }
}
.cone {
 z-index: 4;
 position: absolute;

 width: 0;
 height: 0;
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 border-bottom: 5px solid rgba(black, 0.1);
}
@for $i from 1 through (20) {
 $top: random(90)+px;
 $left: random(90)+px;
 .cone:nth-of-type(#{$i}) {
  top: $top;
  left: $left;
 }
}
.flower {
 width: 12px;
 height: 12px;
 top: -30px;
 left: 30px;
 visibility: hidden;
 transform-origin: 50% 50%;
 &.animated {
  animation: flower 11s ease;
  visibility: visible;
 }
 .flower-in {
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background-color: #de3194;
 }
 .petal {
  z-index: 1;
  width: 36px;
  height: 12px;
  background-color: #ff8cd0;
  border-radius: 50%;
  top: 0%;
  left: -100%;
  transform-origin: 50% 50%;
 }
 .petal:nth-child(2) {
  transform: rotate(55deg);
 }
 .petal:nth-child(3) {
  transform: rotate(120deg);
 }
}
.flower:nth-child(6) {
 top: -70px;
 left: -22px;
}
@keyframes flower {
 0%,
 100% {
  transform: scale(0);
 }
 20%,
 80% {
  transform: scale(0.8);
 }
}
.rabbit {
 visibility: hidden;
 left: 278px;
 top: -10px;
 width: 20px;
 height: 50px;

 &.animated {
  animation: rabbit 6s ease 2;
  visibility: visible;
 }
 .head {
  width: 20px;
  height: 22px;
  background-color: var(--rabbit);
  border-radius: 50%;
  &:after {
   content: "";
   top: 8px;
   left: 5px;
   background-color: black;
   border-radius: 50%;
   height: 3px;
   width: 3px;
   box-shadow: 8px 0 black;
  }
  &:before {
   content: "";
   top: 13px;
   left: 9px;
   background-color: #ff8cd0;
   border-radius: 50%;
   height: 3px;
   width: 3px;
  }
 }
 .ear {
  left: 2px;
  top: -16px;
  height: 16px;
  width: 3px;
  background-color: #ff8cd0;
  border: var(--rabbit) solid 2px;
  border-radius: 50% 50% 0 0;
  transform: rotate(-5deg);
 }
 .ear:nth-child(2) {
  left: auto;
  right: 2px;
  transform: rotate(5deg);
 }
}
@keyframes rabbit {
 0%,
 80%,
 100% {
  transform: translateY(0px);
 }
 40%,
 60% {
  transform: translateY(-25px);
 }
}

View Compiled

var html = document.getElementsByTagName("html")[0];
var sun = document.querySelector(".sun");
var rainbow = document.querySelector(".rainbow");
var rabbit = document.querySelector(".rabbit");
var snow = document.querySelectorAll(".snow");
var rain = document.querySelectorAll(".rain");
var flowers = document.querySelectorAll(".flower");
var lightColours = ["#93d5eb", "#add63a", "#c5d63a", "#febe42"],
 mediumColours = ["#66bbd8", "#92c938", "#acc52b", "#ff9d25"],
 darkColours = ["#4da2bb", "#2a9d5c", "#89a503", "#ff6b2f"],
 backgroundColours = ["#cbe9f4", "#daf8ff", "#feec98", "#ffdc8a"],
 bushColours = ["#ffffff", "#3ebf6d", "#99b31a", "#fd6d2e"],
 cloudColours = ["#ffffff", "#ffffff", "#ffffff", "#eaf9fe"],
 seasons = ["Winter", "Spring", "Summer", "Autumn"];
var c = 1;
var season;

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];

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

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

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

 //add sun and rabbit if season = summer
 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");
 }

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

 //increment array index
 c = (c + 1) % seasons.length;
}

//animate all
let nF = 0;
function animate() {
 if (++nF % 600 === 0) {
  updateSeasons();
 }
 requestAnimationFrame(animate);
}
animate();

View Compiled

This Pen is owned by agathaco on CodePen.

See more by @agathaco on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.