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:
