Categories
CSS HTML Web development

HTML & CSS Clock Animation

HTML & CSS Clock Animation

To learn how to create the CSS Clock Animation follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Clock Animation on the website click here.

Step1.

Add HTML

<div class="clock">
  <div class="face"></div>
  <div class="hr"></div>
  <div class="hrTwo"></div>
  <div class="hands"></div>
  <div class="seconds"></div>
  <div class="parts"></div>
  <div class="top"></div>
  <div class="bell"></div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock {
  position: relative;
  width: 350px;
  height: 350px;
  background-color: #94d2bd;
  overflow: hidden;
}

Style the clock:

.face {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 20px solid #bb3e03;
  background-color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:5;
}

.face:before, .face:after {
  content:"";
  position: absolute;
  background-color: #001219;
  border-radius:3px;
}

.face:before {
  width: 10px;
  height:20px;
  left: 50%;
  transform: translate(-50%,-50%);
  top:15px;
  box-shadow: 0 150px #001219;
}

.face:after {
  width: 20px;
  height:10px;
  top: 50%;
  transform: translate(-50%,-50%);
  left:15px;
  box-shadow: 150px 0 #001219;
}

.hr, .hrTwo {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:5;
}

.hr:before, .hr:after, .hrTwo:before, .hrTwo:after {
  content:"";
  position: absolute;
  background-color: #ced4da;
  border-radius:3px;
  width: 5px;
  height:20px;
}

.hr:before {
  left: 70%;
  transform: translate(-50%,-50%);
  top:16px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(30deg);
}

.hr:after {
  left: 85%;
  transform: translate(-50%,-50%);
  top:41px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(60deg);
}

.hrTwo:before {
  left: 28%;
  transform: translate(-50%,-50%);
  top:14px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(-30deg);
}

.hrTwo:after {
  left: 13%;
  transform: translate(-50%,-50%);
  top:39px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(-60deg);
}

.hands {
  position: absolute;
  z-index:7;
  width: 45px;
  height: 8px;
  background-color: #001219;
  left:130px;
  top:171px;
  border-radius: 5px 0 0 5px;
}

.hands:before {
  position: absolute;
  content:"";
  background-color: #001219;
  width: 60px;
  height: 7px;
  left:40px;
  top:13.5px;
  transform: rotate(25deg);
  border-radius: 0 5px 5px 0;
}

.seconds {
  position: absolute;
  width: 180px;
  height: 180px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:9;
}

.seconds:before {
  content:"";
  position: absolute;
  background-color: #ae2012;
  width:4px;
  height: 75px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transform-origin: top;
}

.seconds:after {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color: #ced4da;
  width: 17px;
  height: 17px;
  border: 5px solid #adb5bd;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.parts {
  position: absolute;
  z-index:2;
  background-color: #001219;
  width: 10px;
  height: 30px;
  left:170px;
  top:40px;
}

.parts:before, .parts:after {
  content:"";
  position: absolute;
  background-color: #001219;
  width: 15px;
  height: 35px;
  border-radius: 0 0 10px 10px;
  top:215px;
}

.parts:before {
  left:-60px;
  transform: rotate(20deg);
}

.parts:after {
  left: 60px;
  transform: rotate(-20deg);
}

.top {
  position: absolute;
  background-color: #bb3e03;
  width: 25px;
  height: 10px;
  border-radius:3px;
  top:40px;
  left:162px;
  z-index:3;
}

.top:before, .top:after {
  content:"";
  position: absolute;
  background-color: #001219;
  width: 12px;
  height: 55px;
  border-radius: 10px 10px 0 0;
  top:-10px;
}

.top:before {
  left:-45px;
  transform: rotate(-25deg);
}

.top:after {
  left:55px;
  transform: rotate(25deg);
}

.bell {
  position: absolute;
  z-index:4;
}

.bell:before, .bell:after {
  content:"";
  position: absolute;
  background-color: #bb3e03;
  width: 60px;
  height: 25px;
  border-radius: 20px 20px 0 0;
  top:-178px;
}

.bell:before {
  left:91px;
  transform: rotate(-25deg);
}

.bell:after {
  left:196px;
  transform: rotate(25deg);
}
Pure CSS Clock Animation

Animate the second hand using the CSS steps() Function:

Add on the end of the .seconds:before the following properties:

animation: sec 60s infinite;
animation-timing-function: steps(60,end);

and @keyframes:

@keyframes sec {
  from {transform: rotate(0);}
  to {transform: rotate(360deg);}
}

Add the shadow:

.clock:before, .clock:after {
  content:"";
  position: absolute;
  
}

.clock:before {
  width:280px;
  height: 305px;
  top:60px;
  left: 75px;
  transform: skew(40deg, -13.5deg);
  background-color: #6f9487;
}

.clock:after {
  background-color: #94d2bd;
  width:300px;
  height:300px;
  transform: rotate(-65deg) skew(-5deg);
  left:-110px;
  top:-65px;
}

.shadow {
  position: absolute;  
}

.shadow:before, .shadow:after {
  content:"";
  position: absolute;
  height: 0;
  z-index:1;
  border-right: 45px solid transparent;
  top:-170px;
}

.shadow:before {
  border-bottom: 50px solid #6f9487;
  left:177px;
  width:10px;
}

.shadow:after {
  border-bottom: 50px solid #6f9487;
  left:130px;
  width:20px;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS & JavaScript Digital Clock

What time is it? – CSS Analog Clock Animation

Countdown Timer

Categories
Web development

HTML & CSS Birthday Card

HTML & CSS Birthday Card

To create the HTML & CSS Birthday card follow the steps below and watch the video tutorial:

Demo:

*to see the HTML & CSS Birthday card on the website click here.

Step1.

Add HTML

<div class="birthday-card">
  <div class="card">
    <div class="cake">
    <div class="cake-bottom"></div>
    <div class="cake-middle"></div>
    <div class="cake-top"></div>
      <div class="candle"></div>
      <div class="flame"></div>
      <div class="shadow"></div>
    </div>
    <div class="confetti">
      <div class="squareOne"></div>
      <div class="squareTwo"></div>
      <div class="squareThree"></div>
      <div class="squareFour"></div>
      <div class="squareFive"></div>
      <div class="squareSix"></div>
      <div class="squareSeven"></div>
      <div class="squareEight"></div>
      <div class="squareNine"></div>
      <div class="squareTen"></div>
    </div>
    <div class="text">Happy Birthday!</div>
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.birthday-card {
  position: relative;
}

Create a card:

.card {
  background-color: #ffd166;
  overflow: hidden;
  width: 380px;
  height: 380px;
  box-shadow: 7px 7px 7px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: .2s;
}

.card:hover {
  transform: scale(1.1);
}
HTML & CSS Birthday Card

Style the cake:

.card:before {
  content:"";
  position: absolute;
  height: 5px;
  width: 250px;
  background-color: #fff;
  border-radius:10px;
  top:340px;
  left:65px;
}

.cake {
  position: relative;
  top:40px;
}

.card:after {
  content:"";
  position: absolute;
  height: 5px;
  border-radius: 0 10px 10px 0;
  width: 122px;
  background-color: rgba(0,0,0,0.1);
  top:340px;
  left:193px;
}

.cake-bottom {
  position: absolute;
  width:200px;
  height: 60px;
  background-color: #06d6a0;
  top:240px;
  left:91px;
  border-radius: 7px 7px 0 0;
  overflow: hidden;
}

.cake-bottom:after {
  content:"";
  position: absolute;
  width: 30px;
  height: 15px;
  left:-5px;
  border-radius: 0 0 50px 50px;
  background-color: white;
  box-shadow: 30px 0 white, 60px 0 white, 90px 0 white, 120px 0 white, 150px 0 white, 180px 0 white;
}

.cake-bottom:before {
  content:"";
  position: absolute;
  background-color: #ef476f;
  width: 30px;
  height: 60px;
  left:25px;
  box-shadow: 60px 0 #ef476f, 120px 0 #ef476f;
}

.cake-middle {
  position: absolute;
  width: 150px;
  height: 60px;
  background-color: #118ab2;
  border-radius: 7px 7px 0 0;
  top:180px;
  left:117px;
  box-shadow: inset 0 -20px #073b4c;
  overflow: hidden;
}

.cake-middle:before {
  content:"";
  position:absolute;
  background-color: #ef476f;
  border-radius:50%;
  width:10px;
  height: 10px;
  top:20px;
  left: 10px;
  box-shadow: 15px 10px #ffd166, 30px 0 #06d6a0, 45px 10px #ef476f, 60px 0 #ffd166, 75px 10px #06d6a0, 90px 0 #ef476f, 105px 10px #ffd166, 120px 0 #06d6a0;
}

.cake-middle:after {
  content:"";
  position: absolute;
  width: 30px;
  height: 15px;
  left:0;
  border-radius: 0 0 50px 50px;
  background-color: white;
  box-shadow: 30px 0 white, 60px 0 white, 90px 0 white, 120px 0 white;
}

.cake-top {
  position: absolute;
  width:100px;
  height: 60px;
  background-color: #ef476f;
  border-radius: 7px 7px 0 0;
  top:120px;
  left:143px;
  overflow: hidden;
  box-shadow: inset 0 20px #118ab2;
}

.cake-top:before {
  content:"";
  position: absolute;
  background-color: #118ab2;
  width: 15px;
  height:35px;
  left:-5px;
  border-radius:20px;
  box-shadow: 15px 10px #ef476f, 30px 5px #118ab2, 45px 5px #ef476f,60px -10px #118ab2, 75px 10px #ef476f, 90px 0 #118ab2; 
}

.cake-top:after {
  position: absolute;
  content:"";
  background-color: rgba(0,0,0,0.1);
  width:50px;
  border-radius: 0 7px 0 0;
  height: 60px;
  left:50px;
}
CSS Birthday Cake

Add the candle and flame:

.candle {
  position: absolute;
  background: repeating-linear-gradient(-45deg, white, white 5px,
  #06d6a0 5px, #06d6a0 10px);
  width:10px;
  height: 40px;
  border-radius: 3px 3px 0 0;
  top:80px;
  left:188px;  
}

.candle:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:1px;
  height:10px;
  top:-10px;
  left:4px;
}

.flame {
  position: absolute;
  opacity:0.7;
}

.flame:before {
  content:"";
  position: absolute;
  background-color: #fb5607;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  transform: rotate(-45deg);
  width:20px;
  height:20px;
  top:55px;
  left:183px;
  animation: scale .5s linear infinite;
}

.flame:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #ffbe0b;
  width: 11px;
  height: 11px;
  top:61px;
  left:187.5px;
  animation: scale .5s linear infinite;
}
CSS birthday card

Animate the flame:

@keyframes scale {
  0% {transform: scaleY(1) rotate(-45deg);}
  25% {transform: scaleY(1.3) rotate(-45deg);}
  50% {transform: scaleY(1) rotate(-45deg);}
  75% {transform: scaleY(1.3) rotate(-45deg);}
  100% {transform: scaleY(1) rotate(-45deg);}
}

Add the shadow:

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  height: 60px;
  width: 74px;
  border-radius:0 7px 0 0;
  top:180px;
  left:193px;
}

.shadow:before, .shadow:after {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.1);
}

.shadow:before {
  height: 60px;
  width:98.5px;
  border-radius:0 7px 0 0;
  top:60px;
}

.shadow:after {
  height: 40px;
  width:5px;
  border-radius: 0 5px 0 0;
  top:-100px;
}

Add and animate the confetti:

.confetti {
  position: absolute;
  width: 380px;
  height: 380px;
  overflow: hidden;
}

.squareOne, .squareTwo, .squareThree, .squareFour, .squareFive, .squareSix, .squareSeven, .squareEight, .squareNine, .squareTen {
  position: absolute;
  width: 10px;
  height: 25px;
  top:-110px;
}

.squareOne {
  background-color: #ef476f;
  animation: down 2.5s linear infinite;
  left:50px;
}

.squareTwo {
  background-color: #06d6a0;
  animation: down 2.3s linear infinite .2s;
  left:150px;
}

.squareThree {
  background-color: #118ab2;
  animation: down 2.4s linear infinite .4s;
  left:250px;
}

.squareFour {
  background-color: #ffbe0b;
  animation: down 2.7s linear infinite .1s;
  left:300px;
}

.squareFive {
  background-color: #118ab2;
  animation: down 2.6s linear infinite .7s;
  left:5px;
}

@keyframes down {
  0% {top:-110px; transform: rotate(0deg) rotateY(-90deg);opacity:1;}
  100% {top:400px; transform: rotate(360deg) rotateY(180deg);opacity:0.5;}
}

@keyframes downTwo {
  0% {top:-130px; transform: rotate(0deg) rotateY(90deg);opacity:1;}
  100% {top:400px; transform: rotate(-360deg) rotateY(-180deg);opacity:0.5;}
}


.squareSix {
  background-color: #ffbe0b;
  animation: downTwo 2.4s linear infinite .2s;
  left:70px;
}

.squareSeven {
  background-color: #ef476f;
  animation: downTwo 2.1s linear infinite .7s;
  left:170px;
}

.squareEight {
  background-color: #ef476f;
  animation: downTwo 2.4s linear infinite .9s;
  left:280px;
}

.squareNine {
  background-color: #06d6a0;
  animation: downTwo 2.9s linear infinite .9s;
  left:50px;
}

.squareTen {
  background-color: #118ab2;
  animation: downTwo 2.2s linear infinite 1.1s;
  left:350px;
}

Style the text:

.text {
  position: absolute;
  font-family: tahoma;
  font-size: 35px;
  z-index:1;
  font-weight: bold;
  width: 380px;
  text-align: center;
  top:30px;
  color: #073b4c;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Folded Birthday Card

CSS Birthday Animation

Simple CSS Birthday Cake

Categories
Web development

CSS Winter window scene

CSS winter snowfall

Demo:

*to see the animation on the website click here.

To create the CSS Window winter scene animation follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

<div class="container">
  <div class="window">
    <div class="frame">
      <div class="snow">
        <div class="snowflake1"></div>
        <div class="snowflake2"></div>
        <div class="snowflake3"></div>
        <div class="snowflake4"></div>
        <div class="snowflake5"></div>
      </div>
      <div class="hills"></div>
      <div class="tree"></div>
      <div class="tree2"></div>
      <div class="tree3"></div>
      <div class="tree4"></div>
      <div class="shine"></div>
    </div>
    <div class="sill"></div>
    <div class="knob"></div>
    <div class="mug"></div>
    <div id="up" class="steam"></div>
    <div id="up" class="steam2"></div>
    <div id="up" class="steam3"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and position of the background, and the elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #e9c46a;
}
.container {
  position: relative;
}

Style the window:

.window {
  position: relative;
}

.frame {
  position: relative;
  width: 350px;
  height: 250px;
  border: 5px solid #e9ecef;
  background-color: #48cae4;
  overflow:hidden;
}

.hills {
  position: absolute;
  background-color: #90e0ef;
  width: 550px;
  height:250px;
  border-radius:50%;
  top:80px;
  left:-100px;
}

.hills:before {
  position: absolute;
  content:"";
  background-color: #ade8f4;
  width: 1000px;
  height:250px;
  border-radius:50%;
  left:50px;
  top:20px;
}

.hills:after {
  content:"";
  position: absolute;
  background-color: #caf0f8;
  width: 800px;
  height:250px;
  border-radius:50%;
  left:-200px;
  top:100px;
}

.tree {
  position: absolute;
  width:3px;
  height:15px;
  background-color: #432818;
  top:170px;
  left:75px;
}

.tree:before {
  content:"";
  position: absolute;
  border-bottom:40px solid #2c6e49;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  width:0;
  height:0;
  left:-8px;
  top:-30px;
}

.tree:after {
  content:"";
  position: absolute;
  width:2px;
  height:15px;
  background-color: #432818;
  top:-60px;
  left:75px;
}

.tree2 {
  position: absolute;
  border-bottom:35px solid #4c956c;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  width:0;
  height:0;
  top:85px;
  left:144px;
}

.tree2:before {
  content:"";
  position: absolute;
  width:1.5px;
  height:15px;
  background-color: #432818;
  top:-12px;
  left:115px;
}

.tree2:after {
  content:"";
  position: absolute;
  border-bottom:27px solid #2c6e49;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width:0;
  height:0;
  top:-28px;
  left:110px;
}

.tree3 {
  position: absolute;
  width:1.5px;
  height:15px;
  background-color: #432818;
  top:85px;
  left:25px;
}

.tree3:before {
  content:"";
  position: absolute;
  border-bottom:20px solid #4c956c;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width:0;
  height:0;
  top:-8px;
  left:-5px;
}

.tree3:after {
  content:"";
  position: absolute;
  width:1.5px;
  height:15px;
  background-color: #432818;
  left:17px;
  top:-5px;
}

.tree4 {
  position: absolute;
  border-bottom:27px solid #2c6e49;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width:0;
  height:0;
  top:64px;
  left:37px;
}

.tree4:before {
  content:"";
  position: absolute;
  width:1.5px;
  height:15px;
  background-color: #432818;
  left:147px;
  top:40px;
}

.tree4:after {
  content:"";
  position: absolute;
  border-bottom:27px solid #2c6e49;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width:0;
  height:0;
  top:23px;
  left:142px;
}

.shine {
  position: absolute;
  width: 200px;
  height:100px;
  background-color: rgba(255,255,255,0.2);
  transform: skew(-20deg,-50deg);
  top:50px;
  left:-10px;
}

.shine:before {
  content:"";
  position: absolute;
  width: 200px;
  height:100px;
  background-color: rgba(255,255,255,0.2);
  top:400px;
  left:320px;
}

.sill {
  position: absolute;
  left:-20px;
  width:400px;
  height:10px;
  background-color: #c5c3c6;
  z-index:15;
  box-shadow: 5px 7px 0 rgba(0,0,0,0.05);
}

.sill:before {
  width:340px;
  height:240px;
  border: 5px solid white;
  content:"";
  position: absolute;
  top:-300px;
  left:25px;
  top:-255px;
  box-shadow:inset 5px 5px rgba(0,0,0,0.05);
}

.sill:after {
  content:"";
  position: absolute;
  background-color: white;
  height: 240px;
  width:10px;
  left:193px;
  top:-250px;
  box-shadow:5px 1px rgba(0,0,0,0.05);
}

.knob {
  position: absolute;
  width:30px;
  height:10px;
  border-radius:10px;
  background-color: #c5c3c6;
  z-index:20;
  top:135px;
  left:175px;
}

Add cup of hot tea:

.mug {
  position: absolute;
  background-color: #db504a;
  width:28px;
  height: 35px;
  border-radius:5px 5px 10px 10px;
  z-index:25;
  top:225px;
  left:250px;
  box-shadow:inset -5px -5px rgba(0,0,0,0.05);
}

.mug:before {
  content:"";
  position: absolute;
  border:5px solid #db504a;
  width:15px;
  height:15px;
  border-radius:50%;
  left:-10px;
  top:5px;
}

#up {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #F3F1E7;
  border-radius: 50%;
  opacity: 0;
  top: 220px;
  left: 255px;
  z-index:20;
}

.steam {
  animation: up 3s ease-out infinite; 
}

.steam2 {
  animation: up 2s ease-out infinite; 
  animation-delay:0.5s;
}

.steam2:before {
  content:"";
  position: absolute;
  left:5px;
  width:15px;
  height:15px;
  background-color: #fff;
  border-radius:50%;
  top:20px;
}

and some snowflakes:

.snow {
  position: absolute;
}

.snowflake1, .snowflake2, .snowflake3, .snowflake4, .snowflake5 {
  width:5px;
  height:5px;
  border-radius:50%;
  opacity:0.7;
  position: absolute;
  z-index:10;
  background-color: white;
}

.snowflake1 {
  animation: fall 4s linear infinite;
  box-shadow: 100px -10px white, 200px -5px white, -20px -35px white, 250px -50px white, 240px -150px white, 40px -130px white;
  left:50px;
}

.snowflake2 {
  animation: fall 5s linear infinite;
  animation-delay:2s;
  top:-55px;
  box-shadow: 75px -10px white, 163px -10px white, -20px -35px white, 250px -50px white, 240px -150px white, 40px -130px white;
  left:30px;
}

.snowflake3 {
  animation: fall 4.5s linear infinite;
  animation-delay:1s;
  top:-85px;
  box-shadow: 90px -10px white, 180px -15px white, -20px -35px white, 230px -50px white, 10px -140px white, 70px -120px white;
  left:60px;
}

.snowflake4 {
  animation: fall 3.5s linear infinite;
  top:-115px;
  box-shadow: 70px -20px white, 140px -5px white, -20px -35px white, 230px -50px white, 110px -80px white, 99px -25 white;
  left:80px;
}

.snowflake5 {
  animation: fall 2.9s linear infinite;
  animation-delay:3s;
  top:-145px;
  box-shadow: 190px -10px white, 280px -15px white, 320px -35px white, 230px -50px white, 113px -100px white, 256px -50px white, 116px -50px white;
  left:-5px;
}

Step3.

CSS Animation

To create Snowfall:

@keyframes fall {
    100% {transform: translateY(400px);}
}

To add to the hot drink steam:

@keyframes up {
  0%{
    transform: translateY(0) scale(0.5);
    opacity: 0.9;
  }
  100%{
    transform: translateY(-50px) scale(1);
    opacity: 0;
  }
}

Watch also the video tutorial:

Enjoy coding!

Read also:

JS Canvas Snow Animation

CSS Christmas Tree Snow Globe

CSS Christmas Tree

Categories
Web development

CSS Snowfall

CSS Snowfall

Demo:

*to see the CSS Snowfall animation on the website click here.

What do you need to do?

To create the CSS Snowfall animation follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

Create the container, and add snow layers:

<div id="snowfall">
  <div class="snow"></div>
  <div class="snow1"></div>
  <div class="snow2"></div>
</div>
  

Step2.

Add CSS

Set the colour and the size of the background and elements:

body {
  height: 100vh;
  background-image: linear-gradient(0deg, #fff 0%, #73bfdc 100%);
}

Set the size and the position of the container:

#snowfall {
  position: absolute;
  width: 100%;
  height: 100px;
}

Add the snowflakes:

.snow {
  position: absolute;
  border-radius:50%;
  filter: blur(1px);
  background-color: #fff;
  width: 10px;
  height: 10px;
  top:-1000px;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  animation: snowfall 7s linear infinite;
}

.snow:before {
  content:"";
  width:7px;
  height:7px;
  position: absolute;
  background-color: #fff;
  left: 200px;
  top:-150px;
  border-radius:50%;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  
}

.snow:after {
  content:"";
  width:5px;
  height:5px;
  position: absolute;
  background-color: #fff;
  left: 300px;
  top:-250px;
  border-radius:50%;
  filter: blur(1px);
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
}
.snow1 {
  position: absolute;
  border-radius:50%;
  filter: blur(2px);
  background-color: #fff;
  width: 9px;
  height: 9px;
  top:-850px;
  left:123px;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  animation-delay:-3s;
  animation: snowfall 9s linear infinite;
}

.snow1:before {
  content:"";
  width:7px;
  height:7px;
  position: absolute;
  background-color: #fff;
  left: 200px;
  top:-350px;
  border-radius:50%;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  
}

.snow1:after {
  content:"";
  width:5px;
  height:5px;
  position: absolute;
  background-color: #fff;
  left: 300px;
  top:-450px;
  border-radius:50%;
  filter: blur(1px);
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
}

.snow2 {
  position: absolute;
  border-radius:50%;
  filter: blur(1.5px);
  background-color: #fff;
  width: 9px;
  height: 9px;
  top:-900px;
  left:-50px;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  animation-delay:-4s;
  animation: snowfall 14s linear infinite;
}

.snow2:before {
  content:"";
  width:7px;
  height:7px;
  position: absolute;
  background-color: #fff;
  left: 200px;
  top:-550px;
  border-radius:50%;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  
}

.snow2:after {
  content:"";
  width:5px;
  height:5px;
  position: absolute;
  background-color: #fff;
  left: 300px;
  top:-650px;
  border-radius:50%;
  filter: blur(1px);
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
}

Step3.

Add CSS Animation

@keyframes snowfall {
    100% {transform: translateY(1500px);}
}

Enjoy coding!

Read also:

CSS Winter window scene

JS Canvas Snow Animation

CSS Christmas Card

Categories
Web development

CSS Christmas Tree

CSS Christmas Tree

Christmas is coming! Do you have your Christmas tree ready?

*animation opened in the Firefox browser.
*to see the animation on the website click here.

Demo:

To create the CSS Christmas Tree animation follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

<div class="christmas">
  <div class="tree">
    <div class="chain"></div>
    <div class="chain2"></div>
  </div>
  <div class="lights">
    <div class="light1"></div>
    <div class="light2"></div>
    <div class="light3"></div>
    <div class="light4"></div>
    <div class="light5"></div>
    <div class="light6"></div>
    <div class="light7"></div>
    <div class="light8"></div>
    <div class="light9"></div>
    <div class="light10"></div>
  </div>
  <div class="balls">
    <div class="ball1"></div>  
  </div>
  <div class="star"></div>
  <div class="gift"></div>
  <div class="ribbon"></div>
  <div class="gift2"></div>
  <div class="ribbon2"></div>
  <div class="gift3"></div>
  <div class="ribbon3"></div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  background-color: #00509d;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.christmas {
  position: relative;
}

Style the Christmas tree:

.tree {
  position: relative;
  background-color: #685044;
  width: 30px;
  height:80px;
  top:100px;
  transform-style: preserve-3d;
}

.tree:before {
  content:"";
  position: relative;
  width: 0;
  height: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-bottom: 270px solid #127475;
  border-radius: 30px;
  top:-250px;
  left:-75px;
}

.tree:after {
  content:"";
  position: relative;
  width: 0;
  height: 0;
  border-right: 90px solid transparent;
  border-bottom: 270px solid #0e9594;
  border-bottom-right-radius: 30px;
  top:-250px;
  left:-165px;
}
.shadow {
  background-color: rgba(0,0,0,0.07);
  position: absolute;
  width: 250px;
  height: 30px;
  border-radius:50%;
  top:170px;
  left:-115px;
  z-index:-1;
}

Add the Christmas decorations:

.chain {
  width: 85px;
  height: 85px;
  border: solid 3px #333;
  border-radius: 50%;
  top: -185px; 
  left: -35px; 
  position: absolute;
  transform: rotate3d(8, 0.1, -5, 75deg); 
  box-sizing: border-box;
  backface-visibility: visible !important;
  z-index:5;
}

.chain2 {
  width: 145px;
  height: 135px;
  border: solid 3px #333;
  border-radius: 50%;
  top: -115px; 
  left: -65px; 
  position: absolute;
  transform: rotate3d(8, 0.1, -5, 75deg); 
  box-sizing: border-box;
  backface-visibility: visible !important;
  z-index:5;
  
}
CSS Xmas Tree

Add the Christmas lights:

.lights {
  position: absolute;
  
}

.light1 {
   position: absolute;
   width: 15px; 
   height: 15px;
   border-radius: 10px 150px 30px 150px;
}

.light1 {
  background-color: #ff595e;
  top:-100px;
  left:-35px;
  transform: rotate(40deg);
  box-shadow: 1px 1px 15px #faf3dd;
}

.light2 {
  position: absolute;
  background-color: #ffca3a;
  top:-95px;
  left:-10px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light3 {
  position: absolute;
  background-color: #6a4c93;
  top:-105px;
  left:15px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light4 {
  position: absolute;
  background-color: #1982c4;
  top:-118px;
  left:35px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light5 {
  position: absolute;
  background-color: #1982c4;
  top:12px;
  left:-55px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light6 {
  position: absolute;
  background-color: #8ac926;
  top:15px;
  left:-25px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light7 {
  position: absolute;
  background-color: #ff595e;
  top:10px;
  left:2px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light8 {
  position: absolute;
  background-color: #ffca3a;
  top:-2px;
  left:27px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light9 {
  position: absolute;
  background-color: #9e0059;
  top:-17px;
  left:50px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light10 {
  position: absolute;
  background-color: #4361ee;
  top:-40px;
  left:68px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}
CSS Christmas Tree

and the star on the top:

.star {
  margin: 50px 0;
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  border-bottom: 17.5px solid #f9dc5c;
  border-left: 25px solid transparent;
  transform: rotate(35deg);
  top:-190px;
  left:-9px;
    }

.star:before {
      border-bottom: 20px solid #f9dc5c;
      border-left: 7.5px solid transparent;
      border-right: 7.5px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -12.5px;
      left: -17.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

.star:after {
      position: absolute;
      display: block;
      top: 0.75px;
      left: -26.25px;
      width: 0px;
      height: 0px;
      border-right: 25px solid transparent;
      border-bottom: 17.5px solid #f9dc5c;
      border-left: 25px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }
CSS Christmas Tree Animation

Style the gifts:

.gift {
  position: absolute;
  width: 60px;
  height: 50px;
  background-color: #ffc857;
  top:130px;
  left:30px;
  box-shadow: inset -8px 0 0 rgba(0,0,0,0.07);
  
}

.gift:before {
  content:"";
  position: absolute;
  width:70px;
  height:15px;
  background-color: #ffc857;
  left:-5px;
  box-shadow: inset -8px -4px 0 rgba(0,0,0,0.07);
  
}

.gift:after {
  content:"";
  background-color: #db3a34;
  width: 10px;
  height:50px;
  position: absolute;
  left:25px;
}

.ribbon {
  position: absolute;
  width: 20px;
  height: 10px;
  border: 3px solid #db3a34;
  border-radius:50%;
  transform: skew(15deg, 15deg);
  top:116px;
  left:35px;
}

.ribbon:before {
  content:"";
  position: absolute;
  width: 20px;
  height: 10px;
  border: 3px solid #db3a34;
  border-radius:50%;
  transform: skew(-15deg, -20deg);
  left:22px;
  top:-8px;
}

.gift2 {
  position: absolute;
  width: 50px;
  height: 40px;
  background-color: #08bdbd;
  top:140px;
  left:-65px;
  box-shadow: inset -8px 0 0 rgba(0,0,0,0.07);
  
}

.gift2:before {
  content:"";
  position: absolute;
  width:60px;
  height:15px;
  background-color: #08bdbd;
  left:-5px;
  box-shadow: inset -8px -4px 0 rgba(0,0,0,0.07);
  
}

.gift2:after {
  content:"";
  background-color: #abff4f;
  width: 10px;
  height:40px;
  position: absolute;
  left:15px;
}

.gift3 {
  position: absolute;
  width: 40px;
  height: 30px;
  background-color: #7678ed;
  top:150px;
  left:-85px;
  box-shadow: inset -8px 0 0 rgba(0,0,0,0.07);
  
}

.gift3:before {
  content:"";
  position: absolute;
  width:50px;
  height:10px;
  background-color: #7678ed;
  left:-5px;
  box-shadow: inset -8px -4px 0 rgba(0,0,0,0.07);
  
}

.gift3:after {
  content:"";
  background-color: #f7b801;
  width: 7px;
  height:30px;
  position: absolute;
  left:15px;
}

.ribbon2 {
  position: absolute;
  width: 15px;
  height: 7px;
  border: 3px solid #abff4f;
  border-radius:50%;
  transform: skew(15deg, 15deg);
  top:129px;
  left:-65px;
}

.ribbon2:before {
  content:"";
  position: absolute;
  width: 15px;
  height: 7px;
  border: 3px solid #abff4f;
  border-radius:50%;
  transform: skew(-15deg, -20deg);
  left:15px;
  top:-8px;
}

.ribbon3 {
  position: absolute;
  width: 12px;
  height: 5px;
  border: 3px solid #f7b801;
  border-radius:50%;
  transform: skew(15deg, 15deg);
  top:142px;
  left:-85px;
}

.ribbon3:before {
  content:"";
  position: absolute;
  width: 12px;
  height: 5px;
  border: 3px solid #f7b801;
  border-radius:50%;
  transform: skew(-15deg, -20deg);
  left:15px;
  top:-8px;
}

and add some Christmas balls:

Pure CSS Christmas Tree

Step3.

Add CSS Animation

To add some flash to Christmas lights:

.light1, .light2, .light3, .light4, .light5, .light6, .light7, .light8, .light9, .light10 {
  -webkit-animation: flash 10s infinite;
}

@-webkit-keyframes flash {
  20%, 24%, 55% {box-shadow: none;}
 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
 box-shadow: 0 0 5px #f5de93, 0 0 15px #f5de93, 0 0 20px #f5de93, 0 0 40px #f5de93, 0 0 60px #decea4, 0 0 10px #d6c0a5, 0 0 98px #ff0000;
  }
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Winter window scene

CSS Christmas Tree Snow Globe

CSS Snowfall