Creating an Animated Christmas Tree with CSS

A Christmas Tree was one of the few CSS arts I always wanted to learn how to implement 😊 and with time I was able to achieve this.

In this article, I will explain how I was able to implement a Christmas Tree using CSS.

Firstly we will start with the HTML, we will consider four parts :

• The star

• The tree

• The trunk

• The ornaments

HTML

<section>
    <center>
      <h1 class="header">Merry Christmas!</h1>

      <div class="tree">

        <div class='star'></div>

        <div class='treeBody'>

<!--    Ornaments        -->
          <div class=' orb orb1'>
          </div>
          <div class='orb orb2'>
          </div>
          <div class='orb orb3'>
          </div>
          <div class='orb orb4'>
          </div>
        <div class="triangle1">
        </div>
        <div class="triangle2">
        </div>
        <div class="triangle3">
        </div>

        </div>

        <div class='trunk'>
        </div>

      </div>

    </center>
</section>

CSS

The Star - To get the shape of the star, i was able to create one using the clip-path property from Clippy Website

.star{
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background:  #e7c400;
    background: radial-gradient(circle, #fbeea3,  #e7c400);
  width:100px;
  height:100px;
}

The tree - For the tree, i was able to create it by joining three triangles together.

 .treeBody{
    position:relative;
    }
        .triangle1{
        position: relative;
        width: 150px;
        height: 150px;
        background: #16850c;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          margin-top:-40px;
          z-index:-1;
        }
        .triangle2{
        position: relative;
        width: 200px;
        height: 200px;
        background: #16850c;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          margin-top:-90px;
          z-index:-1;
        }
  .triangle3{
        position: relative;
        width: 250px;
        height: 250px;
        background: #16850c;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          margin-top:-120px;
          z-index:-1;
        }

The ornaments - creating the ornaments was quite easy, this involved producing circles and positioning them on the tree.

 .orb1{
            position: absolute;
          width: 25px;
          height:25px;
          border-radius: 50%;
          box-shadow: 0px 0px .3em rgba(255,255,255,.8);
            background: #ed0000;
          background: radial-gradient(circle,#f77373, #ed0000);
          top: 30%;
          left: 48%;
        }

.orb2{
    position: absolute;
  width: 25px;
  height:25px;
  border-radius: 50%;
  box-shadow: 0px 0px .3em rgba(255,255,255,.8);
    background: #e7c400;
  background: radial-gradient(circle,#fbeea3, #e7c400 );
  top: 50%;
  left: 50%;
}

.orb3{
    position: absolute;
  width: 25px;
  height:25px;
  border-radius: 50%;
  box-shadow: 0px 0px .3em rgba(255,255,255,.8);
    background: #ed0000;
  background: radial-gradient(circle,#f77373, #ed0000);
  top: 70%;
  left: 48%;
}
.orb4{
    position: absolute;
  width: 25px;
  height:25px;
  border-radius: 50%;
  box-shadow: 0px 0px .3em rgba(255,255,255,.8);
    background: #e7c400;
  background: radial-gradient(circle, #fbeea3,#e7c400);
  top: 90%;
  left: 50%;
}

The trunk This was a simple rectangle placed at the bottom.

    .trunk {
      margin: 0 auto;
      width: 100px;
      height: 50px;
      background: #8c370f;
      background: linear-gradient(#8c370f, #5c240a);
    }

Yay !!! , the tree is almost complete.

Lastly, to add animations to make it look more lively. I was able to animate the star to pop and add a glowing effect to the ornaments.

• animation for the star

 @keyframes pop{
        0%{ transform: scale(0.8);
        }

        25%{ transform: scale(0.9);
        }

        50%{ transform: scale(1.01);}

        75%{ transform: scale(1.02);}

        100%{ transform: scale(1.03);

        }
      }

.star{
animation: pop 2s infinite linear;
}

• animation for the ornament

        @keyframes lights{
            0% {
                box-shadow: 0px 0px 1em rgba(255,255,255,.8);
              }
              50% {
                box-shadow: 0px 0px 1.3em rgba(255,255,255,.4);
              }
              100% {
                box-shadow: 0px 0px .3em rgba(255,255,255,.8);
              }
        }

      .orb{
            animation: lights 2.5s infinite normal;
        }


    .orb2{
      animation-delay: 0.3s;
      }

.orb4{
  animation-delay: 0.3s;
  }

To learn more about creating animations with CSS, check out this article

Thanks for reading 💜