Learn how to build Christmas greeting using CSS Animations

Blog thumbnail

In today’s short tutorial we are going to build a christmas greeting card using CSS animations.
Here’s a preview of our final greeting card which we are going to build today:-

Project Preview

The steps for building this greeting card are as follows:-

Step 1: Add Greeting card content

  • Create a new project directory and create index.html file in which we can add our HTML code, a CSS folder which will `style.css` for our project and a folder for our images.
Files
  • We need to use bootstrap in our project so let’s add bootstrap related files in our head section and change the title. Also we need to add Dancing Script and Work Sans Google font for our design.
    The complete head section till this point would look like this:-
  • Next we need to download the image which is seen on left side of our design from Pixabay and add it in images folder of our website.
  • Now we are ready to add HTML content within our body tag as shown below:-

We have mainly used bootstrap classes with some custom classes in the above code.

  • Next we will open style.css and focus on CSS part of our website. First we will define the colors required in our page using CSS variables:-
  • Next we can define CSS animations using `@keyframe` CSS attribute:-

We are basically keeping the left side image, out of the page in the beginning using negative value for translate attribute and then bringing it back into the page towards the end of the animation.
We can define a similar animation for sliding the text from right side of the page:-

Now we are ready to use this defined animations using below CSS property:

Here the first value is the animation name, second value is the total time of the animation(1s in our case), third value is type of animation, fourth value is delay in animation(0s in our case) and the last value is the animation iteration count which is 1 in our case since we want the animation to repeat only once.

We can use the above property in our CSS file as shown below:-

You can find the complete CSS file with other page properties here: Github

Once we are done with writing this CSS code the animation should be visible on the page when it is refreshed.

If you prefer to learn from video tutorials, you can find the complete process of building this mini project on Youtube below:-

Video tutorial

The complete source code for this project can be found here: Github

That concludes our short tutorial on building new year greeting using CSS animation.
Have fun and happy new year🥳

Blogger,web and hybrid applications developer