Categories
Web development

CSS Christmas Card Animation/ CSS filter Property

Learn how to create the CSS Christmas Card Animation with HTML and CSS.



CSS Christmas Tree

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:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Card (Open/ Close on Click)

CSS Christmas Tree Snow Globe

CSS Christmas Tree Animation