CSS Christmas Card Animation/ CSS filter Property

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

Demo:

*to see the CSS Christmas Card Animation on the website click here.

Step1.

Add HTML

    <div id="christmas-card" class="christmas-card">
        <div class="christmas-tree"></div>
        <div class="snow"></div>
        <div class="wishes">
            <div class="wish"></div>
            <div class="merry"></div>
            <div class="xmas"></div>
        </div>
    </div>

Step2.

Add CSS

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

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

Style the card:

.christmas-card {
            overflow: hidden;
            position: relative;
            width: 350px;
            height: 400px;
            background-color: #9ceaef;
            box-shadow: 15px 1px 50px rgba(0,0,0,.2);

        }
        
        .christmas-card:before {
            content:"";
            position: absolute;
            width: 400px;
            height: 150px;
            background-color: white;
            border-radius: 50%;
            top:290px;
            left:-25px;
            box-shadow: -130px -10px #f8f9fa, 80px -20px #e9ecef;
        }
        
        .christmas-card:after {
            content:"";
            position: absolute;
            background-color: rgba(0,0,0,.2);
            width: 100px;
            height: 20px;
            border-radius: 50%;
            top:300px;
            left:120px;
        }

Style and animate the Christmas Tree:

       .christmas-tree {
               position: relative;
               width: 20px;
               height: 40px;
               background-color: #bc6c47;
               top:270px;
            left: 160px;
               box-shadow: inset 0 25px rgba(0,0,0,.5);
              z-index:1;
}

.christmas-tree:before {
  content:"";
  position: absolute;
  border-style:solid;
  border-color: transparent transparent #8fb440 transparent;
  border-width: 0 50px 60px 50px;
  height:0;
  width:0;
  top: -40px;
  left:-40px;
  filter: drop-shadow(0 -30px #8fb440) drop-shadow(0 -30px #8fb440);
}
        

        
        .christmas-tree:after {
            content:"";
            position: absolute;
            width:15px;
            height: 15px;
            background-color: #ae2012;
            border-radius: 50%;
            box-shadow: -25px -20px #e9d8a6, 35px -30px #0a9396, 10px -40px #ee9b00, -15px -60px #ae2012, 25px -70px #e9d8a6, 0px -85px #0a9396;
            animation: light 3s linear infinite 3s;
        }
        @keyframes light {
            0%, 20%, 40%,60%, 80%, 100% {
                box-shadow: -25px -20px #e9d8a6, 35px -30px #0a9396, 10px -40px #ee9b00, -15px -60px #ae2012, 25px -70px #e9d8a6, 0px -85px  #0a9396;
                background-color: #ae2012;
            }
            10%, 30%, 50%, 70%, 90% {
                box-shadow: -25px -20px #0a9396, 35px -30px #ee9b00, 10px -40px #0a9396, -15px -60px #ee9b00, 25px -70px #ae2012, 0px -85px  #e9d8a6;
                background-color: #e9d8a6;
            }
        }

Add snowfall:

  .snow, .snow:before {
            position: absolute;
            background-color: white;
            width:8px;
            height: 8px;
            top:-50px;
            border-radius: 50%;
            box-shadow: 30px -40px white, 100px 10px white, 150px -10px white, 200px -20px white, 300px -30px white, 40px -20px white, 330px 10px white;
            filter: drop-shadow(0 -100px white)drop-shadow(-20px -150px white);
            animation: fall 5s linear infinite 2s;
        }
        
        .snow {
            opacity:.7;
        }
        
        .snow:before {
            content:"";
            opacity: .5;
            animation-delay: 4.5s;
        }
        
        @keyframes fall {
  0% {top:-50px;}
  100% {top:400px;}
}

Add and animate the text:

     .wishes {
            color: white;
            position: relative;
            width:350px;
        }
        
        .wish, .merry, .xmas {
            position: relative;
            overflow: hidden;     
        }
        
        .wish {
            font-size: 20px;
            height: 20px;
        }
        .merry {
            top:0;
            height: 30px;
        }
        
        .xmas {
            top: 0;
            height:40px;
        }
        
        .wish:before, .merry:before, .xmas:before {
            text-align: center;
            width: 350px;
            position: absolute;
            
        }
        .wish:before {
            content: "WISH YOU";
            top:20px;
            animation: slideUp ease .4s forwards;
        }
        
        @keyframes slideUp {
  0% {transform: translateY(0);}
  100% {transform: translateY(-20px);opacity:1;}        
}
        @keyframes slideUpTwo {
  0% {transform: translateY(0);}
  100% {transform: translateY(-30px);opacity:1;}
        }
            
            @keyframes slideUpThree {
  0% {transform: translateY(0);}
  100% {transform: translateY(-40px);opacity:1;}
        }
        
        .merry:before {
            content:"MERRY";
            font-size: 30px;
            top:30px;
            animation: slideUpTwo ease .4s forwards .4s;
        }
        
        .xmas:before {
            content:"CHRISTMAS";
            font-size: 40px;
            top:40px;
            animation: slideUpThree ease .4s forwards .8s;
        }

Step3.

Add jQuery (optional)

To repeat the animation on click add jQuery:

To read how to add the jQuery code to HTML click here.

$(document).ready(function(){
  $('#christmas-card').mouseleave(function(){
    $(this).removeClass('clicked');
  }).click(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});

Watch also the video tutorial: