Happy New Year Animation using HTML and CSS

Happy New Year Animation Using HTML and CSS

In this tutorial we’ll see how to make Happy New Year Animation using HTML and CSS. Creating CSS Happy New Year Animation is very easy if you know basic HTML and CSS.

Earlier I have shared many types of CSS animation tutorials, now time to create Happy New Year Animation Using HTML and CSS.

Happy New Year Animation Using HTML and CSS

Happy New Year Animation can be seen on the home page or popup form of your website. In this design I used some numbers, some text and some animation. Here I have used Pure CSS and HTML to create this CSS Happy New Year Animation. No external CSS or JavaScript is used.

Did you know earlier I shared a Christmas Animation Effects tutorial using HTML CSS. You can see if you want.

Here I have given all the codes of this project(happy new year wish animation using html css), you can download those codes and use them as per your requirement.

New Year Animation HTML Code

Create a Folder and inside that folder make a file ‘index.html’ and Open it in your favorite code editor and paste the below code:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy New Year 2023</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="msg">Happy New Year</div>
    <div class="year">
        <span class="first_year">
            <span class="y1">2</span>
            <span class="y2">0</span>
            <span class="y3">2</span>
        </span>
        <span class="old">3</span>
        <span class="y4 new">4</span>
        <div class="balloon"></div>
    </div>
    <div class="firework" id="firework1">
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
    </div>
    <div class="firework" id="firework2">
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
    </div>
    <div class="firework" id="firework3">
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
        <div class="cracker"></div>
    </div>
</body>
</html>

Let’s Breakdown the code and understand the elements of HTML Code:

    100 Day , 100 HTML CSS JavaScript Projects

    Happy New Year Wish Animation CSS Code

    Inside that folder create a index.css file and paste the following code:-

    @import url("https://fonts.googleapis.com/css2?family=Bilbo+Swash+Caps&family=Poppins:wght@900&display=swap");

*,
*:after,
*:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
}

body {
  background-color: #1a1818;
  overflow: hidden;
  height: 100vh;
}

.msg {
  width: 100%;
  font-family: "Bilbo Swash Caps", cursive;
  font-size: 100px;
  font-weight: bolder;
  color: #ff00c3;
  text-align: center;
  position: absolute;
  top: 50%;
  opacity: 0;
  animation: message 2s ease-in-out 6s forwards;
}

@keyframes message {
  0% {
    opacity: 0;
    margin-top: 0;
  }
  100% {
    opacity: 1;
    margin-top: -200px;
  }
}

.y1 {
  color: #fff;
  animation: y1colorful 2s ease-in-out 5.75s forwards;
}
.y2 {
  color: #fff;
  animation: y2colorful 2s ease-in-out 5.75s forwards;
}
.y3 {
  color: #fff;
  animation: y3colorful 2s ease-in-out 5.75s forwards;
}
.y4 {
  color: #fff;
  animation: y4colorful 2s ease-in-out 5.75s forwards;
}

@keyframes y1colorful {
    0% {
        color: #fff;
    }
    100% {
        color: orange;
    }
}
@keyframes y2colorful {
    0% {
        color: #fff;
    }
    100% {
        color: #4cdde2;
    }
}
@keyframes y3colorful {
    0% {
        color: #fff;
    }
    100% {
        color: #ff94a6;
    }
}
@keyframes y4colorful {
    0% {
        color: #fff;
    }
    100% {
        color: yellow;
    }
}

.old {
  color: #fff;
  position: absolute;
  top: 0%;
  animation: old_animation 2.5s ease-in-out 4s forwards;
  margin-left: -80px;
}

@keyframes old_animation {
  0% {
    top: 0%;
  }
  100% {
    top: -250%;
  }
}

.year {
  position: absolute;
  top: 450px;
  width: 100%;
  text-align: center;
}

.year > span {
  font-size: 175px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  letter-spacing: -12px;
}

.first_year {
  margin-right: 100px;
}

.new {
  position: absolute;
  right: -100px;
  animation: new_animation 5s ease-in-out 1.5s forwards;
}

@keyframes new_animation {
  0% {
    right: -100px;
  }
  40% {
    right: 400px;
  }
  90% {
    right: 400px;
  }
  100% {
    right: 520px;
    color: yellow;
  }
}

.balloon {
  width: 100px;
  height: 120px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  top: 50%;
  right: -100px;
  margin-top: -285px;
  animation: balloon_animation 5s ease-in-out 1.5s forwards;
}

.balloon::after {
  content: "";
  width: 4px;
  height: 100px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  margin-left: -2px;
  bottom: -100px;
}

.balloon::before {
  content: "";
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #fd3553 transparent;
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -10px;
}

@keyframes balloon_animation {
  0% {
    right: -100px;
  }
  40% {
    right: 380px;
  }
  50% {
    right: 530px;
    top: 50%;
  }
  100% {
    right: 530px;
    top: -200%;
  }
}

.firework {
    position: relative;
    opacity: 0;
    animation: show_fireworks 2s ease-in-out 5s forwards;
}

@keyframes show_fireworks {
    0% {
        opacity: 0;
    }
    99% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.cracker {
    position: absolute;
    width: 4px;
    height: 80px;
    transform-origin: 50% 100%;
    overflow: hidden;
}

.cracker::before {
    content: '';
    background-color: gold;
    height: 40px;
    position: absolute;
    left: 0;
    right: 0;
    animation: fire 2s ease-in-out infinite;
}

@keyframes fire {
    0% {
        top: 100%;
    }
    25% {
        top: 50%;
    }
    50% {
        top: -25%;
    }
    75% {
        top: -50%;
    }
    100% {
        top: -50%;
    }
}

.cracker:nth-child(1) {
    transform: rotate(0deg) translateY(-15px);
}
.cracker:nth-child(2) {
    transform: rotate(30deg) translateY(-15px);
}
.cracker:nth-child(3) {
    transform: rotate(60deg) translateY(-15px);
}
.cracker:nth-child(4) {
    transform: rotate(90deg) translateY(-15px);
}
.cracker:nth-child(5) {
    transform: rotate(120deg) translateY(-15px);
}
.cracker:nth-child(6) {
    transform: rotate(150deg) translateY(-15px);
}
.cracker:nth-child(7) {
    transform: rotate(180deg) translateY(-15px);
}
.cracker:nth-child(8) {
    transform: rotate(210deg) translateY(-15px);
}
.cracker:nth-child(9) {
    transform: rotate(240deg) translateY(-15px);
}
.cracker:nth-child(10) {
    transform: rotate(270deg) translateY(-15px);
}
.cracker:nth-child(11) {
    transform: rotate(300deg) translateY(-15px);
}
.cracker:nth-child(12) {
    transform: rotate(330deg) translateY(-15px);
}

#firework1 {
    left: 25%;
    top: 50%;
    transform: scale(1);
}

#firework2 {
    left: 50%;
    top: 75%;
    transform: scale(0.5);
}

#firework3 {
    left: 80%;
    top: 15%;
    transform: scale(1.5);
}

    Let’s Breakdown the CSS Code and understand the main components of the code:-

    • Font Import:- The @import rule is used to import two Google Fonts.You can import the fonts as per your need using this rule in CSS.
    • Global Styles:- Global styles in CSS are (*, *:after,*:before) set box-sizing to border-box for all elements, ensuring that padding and border are included in the elements total width and height.
    • Balloon Animation:- It is styled to resemble a balloon and positioned absolutely. It is animated to move from the right to the center and then move upward.
    • KeyFrame Animations:- The keyframes animations are defined here are (message, y1colorful, y2colorful, y3colorful, y4colorful, old_animation, new_animation, balloon_animation, show_fireworks, fire) to create the dynamic effects and movements for elements.
    • Message(`msg`) :- This Message element has various styles are applied as you can see in code itself including font family, size, weight, color, and positioning. The Opacity is initially set to 0, and an animation is defines to gradually fade in the message and move it to upward.

    These are the key components that work together and provide you with an animated and engaging New Year Webpage.

    You must need to Read about the CSS Animation Effects from here.

    Source Code Of Happy New Year Animation Effect

    Below We’ve provided the CodePen source code for the Happy New Year Animation live demonstration for better understanding.

    15+ HTML CSS Projects With Source Code

    Conclusion

    Congratulations!!! You’ve completed another mini-project using HTML and CSS. I hope you’ve understood the code structure and project workflow. This Happy New Year Animation mini project gonna build your strength on the CSS properties and HTML classes and Attributes.

    HAPPY CODING!



    Leave a Reply