Happy Birth Day Stylish Animations Through CSS, Html and JavaScript

Following is the CSS, HTML, and javascript code for this beautiful and attractive Birthday Animation Welcome.

CSS3 and JavaScript Made it very easy and flexible for developers to create great UIs and Ux. In this tutorial post, you will find that how efficiently I have created these amazing animations.

As we know that JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions. JavaScript is the most used language.

Here is the actual code for these animations including Html, CSS3, and JavaScript.

<!doctype html> <html>   <head>      <style type="text/css">        Created By Naseer Ullah
/body {    margin: 0;    padding: 0    /* created by naseer ullah*/}
#birthday {    width: 350px;    height: 100vh;        position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    overflow: hidden}
#section1 {    font-family: 'Patrick Hand SC', cursive;}
h1 {    width: 100%;    height: 200px;    text-align: center;    position: absolute;    top: 170px;    left: -90px;    font-size: 40px;}
#happy {    animation: happy 1s linear 0.1s 1, happy1 1s linear 1s infinite;    animation-fill-mode: forwards;    transform: scale(0)}
@keyframes happy {    from {        transform: scale(0)    }    to {        transform: scale(1);    }}
@keyframes happy1 {    0%,    100% {        transform: rotateZ(-20deg) scale(1);    }    50% {        transform: rotateZ(20deg) scale(1);    }}
#birth {    animation: happy 1s linear 0.1s 1, happy1 1s linear 1s infinite;    animation-fill-mode: forwards;    transform: scale(0)}
#you {    animation: happy 1s linear 0.1s 1, happy1 1s linear 1s infinite;    animation-fill-mode: forwards;    transform: scale(0)}
#cartoons {    width: 150px;    height: 100vh;    background: radial-gradient(white, #FFEA96);    position: absolute;    left: 200px}
#backsection1 {    width: 350px;    height: 100vh;    background: white;    position: absolute;    animation: back 5s linear 1s 1;    animation-fill-mode: forwards;}
@keyframes back {    0% {        left: 0px    }    20% {        left: -10px    }    30% {        left: -50px    }    60% {        left: -70px    }    80% {        left: -100px    }    100% {        left: -1200px    }}
#cartoon1 {    width: 70px;    height: 70px;    background-image: url(https://image.flaticon.com/icons/svg/187/187130.svg);    position: absolute;    top: 200px;    left: -30px;    transform: rotateZ(20deg);    animation: cartoon1 1s linear 0.1s infinite;}
@keyframes cartoon1 {    0%,    100% {        transform: rotateZ(30deg)    }    50% {        transform: rotateZ(-10deg);        left: -20px;        top: 180px;    }}
#hat1 {    background-image: url(https://image.flaticon.com/icons/svg/2155/2155390.svg);    width: 80px;    height: 80px;    background-size: cover;    position: absolute;    top: -65px;    transform: rotateZ(13deg);    left: 10px}
#cartoon2 {    width: 70px;    height: 70px;    background-image: url(https://image.flaticon.com/icons/svg/187/187134.svg);    position: absolute;    top: 240px;    left: -30px;    transform: rotateZ(20deg);    animation: cartoon2 2s linear 0.11s infinite;}
@keyframes cartoon2 {    0%,    100% {        transform: rotateZ(60deg);            }        50% {        transform: rotateZ(50deg);        left: -20px;        top: 240px;        }}
#hat2 {    background-image: url(https://image.flaticon.com/icons/svg/194/194408.svg);    width: 80px;    height: 80px;    background-size: cover;    position: absolute;    top: -65px;    transform: rotateZ(13deg);    left: 10px}
#top1 {    width: 3500px;    height: 100px;    background-image: url(https://image.flaticon.com/icons/svg/194/194369.svg);    position: absolute;    z-index: 1;    animation: top1 15s linear 0.1s infinite;    background-repeat: repeat-x;    left: -50px}
@keyframes top1 {    0% {        left: -30px;        top: 20px    }    100% {        left: 30px;        top: 25px    }}
#cartoon3 {    width: 70px;    height: 70px;    position: absolute;    top: 300px;    left: -30px;    transform: rotateZ(20deg);    background-image: url(https://image.flaticon.com/icons/svg/187/187147.svg);    animation: cartoon3 4s linear 0.11s infinite;}
@keyframes cartoon3 {    0%,    100% {        transform: rotateZ(60deg);        display: none    }    50% {        transform: rotateZ(50deg);        left: -20px;        top: 300px;        }}
#hat3 {    background-image: url(https://image.flaticon.com/icons/svg/415/415599.svg);    width: 80px;    height: 80px;    background-size: cover;    position: absolute;    top: -65px;    transform: rotateZ(13deg);    left: 10px}
#button1 {    width: 100px;    height: 50px;    border-radius: 0;    border-style: none;    background: crimson;    color: white;    font-size: 18px;    font-weight: bold;    position: absolute;    top: 420px;    left: 140px;    animation: bounce-in-top 1.1s both;    animation-delay: 8s;}
@keyframes bounce-in-top {    0% {        transform: translateY(-500px);        animation-timing-function: ease-in;        opacity: 0    }    38% {        transform: translateY(0);        animation-timing-function: ease-out;        opacity: 1    }    55% {        transform: translateY(-65px);        animation-timing-function: ease-in    }    72% {        transform: translateY(0);        animation-timing-function: ease-out    }    81% {        transform: translateY(-28px);        animation-timing-function: ease-in    }    90% {        transform: translateY(0);        animation-timing-function: ease-out    }    95% {        transform: translateY(-8px);        animation-timing-function: ease-in    }    100% {        transform: translateY(0);        animation-timing-function: ease-out    }}

/* Section 2  ****************************** */
#section2 {    background: #24383F;    width: 100%;    height: 100vh}
#table {    background-image: url(https://image.flaticon.com/icons/svg/2059/2059756.svg);    width: 300px;    height: 300px;    position: absolute;    background-size: cover;    top: 252px;    left: 30px;    z-index: 1}
#cake {    position: absolute;    top: -700px;    z-index: 11;}
@keyframes cake {    0% {        transform: rotateZ(30deg);        left: -50px    }    20% {        transform: rotateZ(0deg);        left: 0px;        top: -600px    }    50% {        transform: rotateZ(-20deg);        left: 0px;        top: -500px    }    53% {        transform: rotateZ(-20deg);        left: -20px;        top: -400px    }    57% {        transform: rotateZ(-20deg);        left: 20px;        top: -300px    }    60% {        transform: rotateZ(10deg);        left: -20px;        top: -200px    }    70% {        transform: rotateZ(0deg);        left: 20px;        top: -100px    }    80% {        transform: rotateZ(0deg);        left: 0px;        top: 0px    }    90% {        transform: rotateZ(0deg);        left: 0px;        top: -20px    }    100% {        transform: rotateZ(0deg);        left: 0px;        top: 0px    }}
#layer1 {    width: 180px;    height: 10px;    background: #F158AA;    position: absolute;    top: 318px;    left: 90px;    z-index: 1;    border-radius: 5px;}
#layer2 {    width: 140px;    height: 50px;    background: #FECDE3;    position: absolute;    top: 278px;    left: 110px;    border-radius: 10px 10px 0 0;    overflow: hidden;}
#layer3 {    width: 100px;    height: 40px;    background: #FECDE3;    position: absolute;    top: 238px;    left: 130px;    border-radius: 10px 10px 0 0;    overflow: hidden;    z-index: 1}
#cream {    position: absolute;    height: 70px;    width: 600px;    background: #8A4036;    transform: scale(0.235);    left: -211px;    top: -67px;    border-radius: 30px 30px 0 0;}
#cream:before {    content: "";    display: block;    position: absolute;    border-radius: 100% 50%;    width: 340px;    height: 80px;    background-color: #FECDE3;    right: -5px;    top: 40px;}
#cream:after {    content: "";    display: block;    position: absolute;    border-radius: 100% 50%;    width: 300px;    height: 70px;    background-color: #8A4036;    left: 0;    top: 27px;}
#circ1 {    width: 15px;    height: 15px;    background: #E94444;    position: absolute;    top: 0px;    border-radius: 50%;    margin-top: 5px;    padding: 2px;    overflow: hidden;    padding:}
#circ2 {    width: 15px;    height: 15px;    background: #E94444;    position: absolute;    top: 0px;    border-radius: 50%;    margin-top: 5px;    padding: 2px;    left: 20px;    overflow: hidden;}
#circ3 {    width: 15px;    height: 15px;    background: #E94444;    position: absolute;    top: 0px;    border-radius: 50%;    margin-top: 5px;    padding: 2px;    left: 40px;    overflow: hidden;}
#circ4 {    width: 15px;    height: 15px;    background: #E94444;    position: absolute;    top: 0px;    border-radius: 50%;    margin-top: 5px;    padding: 2px;    left: 60px;    overflow: hidden;}
#circ5 {    width: 15px;    height: 15px;    background: #E94444;    position: absolute;    top: 0px;    border-radius: 50%;    margin-top: 5px;    padding: 2px;    left: 80px;    overflow: hidden;}
.circ {    width: 15px;    height: 15px;    background: #F47C7C;    border-radius: 50%;    margin-left: 4px}
.candle1 {    background-color: #90EE90;    height: 70px;    width: 20px;    position: absolute;    top: 179px;    left: 165px;    transform: scale(0.7)}
.flame1 {    background-color: #fbb200;    height: 22px;    width: 22px;    border-radius: 0 50% 50% 50%;    position: absolute;    top: -22px;    transform: rotate(45deg);    -webkit-transform: rotate(45deg);    box-shadow: 0 0 15px 2px rgb(251, 178, 0, 0.6);    animation: glow 2s infinite;    -webkit-animation: glow 2s infinite;}
@keyframes glow {    50% {        box-shadow: 0 0 2px 0 rgb(251, 178, 0, 0.6);        top: -20.5px;    }}
#ballon {    position: absolute;    z-index: -4}
#ballon1 {    width: 150px;    height: 150px;    background-image: url(https://image.flaticon.com/icons/svg/194/194366.svg);    position: absolute;    transform: rotateZ(0deg);    left: 17px;    top: 174px;    animation: ballon1 3s linear 0.1s infinite;    transform-origin: bottom;}
@keyframes ballon1 {    0%,    100% {        transform: rotateZ(-40deg)    }    30% {        transform: rotateZ(0deg)    }    60% {        transform: rotateZ(-20deg)    }}
#ballon2 {    width: 150px;    height: 150px;    background-image: url(https://image.flaticon.com/icons/svg/194/194366.svg);    position: absolute;    transform: rotateZ(20deg);    left: 190px;    top: 174px;    animation: ballon2 3s linear 0.1s infinite;    transform-origin: bottom;}
@keyframes ballon2 {    0%,    100% {        transform: rotateZ(30deg)    }    30% {        transform: rotateZ(20deg)    }    60% {        transform: rotateZ(40deg)    }}

/*******   BOY    **********************/
#virat {    position: absolute;    top: 100px;    left: 1300px;    transform: scale(0.9);}
@keyframes virat {    to {        left: 140px    }}
#head {    width: 73px;    height: 80px;    border-radius: 39% 61% 51% 49% / 29% 19% 81% 71%;    background: #FCC491}
#hair {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/42/42055.svg);    background-size: cover;    background-repeat: no-repeat;    position: absolute;    top: -30px;    transform: scale(1.1)}
.eye {    width: 18px;    height: 13px;    border-radius: 39% 61% 68% 32% / 100% 19% 81% 0%;    background: white;    border: 2px solid;    border-bottom: none;    border-right: none;    overflow: hidden;}
@-webkit-keyframes blink1 {    0%,    100% {        transform: scale(1, .05) rotateZ(-30deg) rotateY(180deg);    }    5%,    95% {        transform: scale(1, 1) rotateZ(-30deg) rotateY(180deg);    }}
#eye1 {    position: absolute;    top: 30px;    transform: rotateZ(-30deg) rotateY(180deg);    left: 10px;    -webkit-transform-origin: 50%;    -webkit-animation: blink1 5s infinite;}
#eye2 {    position: absolute;    top: 30px;    transform: rotateZ(30deg);    left: 40px;    -webkit-transform-origin: 50%;    -webkit-animation: blink2 5s infinite;}
@-webkit-keyframes blink2 {    0%,    100% {        transform: scale(1, .05) rotateZ(30deg);    }    5%,    95% {        transform: scale(1, 1) rotateZ(30deg);    }}
.iris {    width: 10px;    height: 10px;    background: black;    border-radius: 50%;    margin: 4px;    animation: iris 2s linear 0.1s infinite;}
@keyframes iris {    0%,    100% {        margin: 2px    }    40% {        margin: 3px    }}
#mouth {    width: 60px;    height: 60px;    background-image: url(https://image.flaticon.com/icons/svg/146/146345.svg);    position: absolute;    top: 40px;    transform: scale(0.3);    left: 5px;}
@keyframes mouth {    50% {        background-image: url(https://image.flaticon.com/icons/svg/327/327279.svg)    }}
.neck {    width: 25px;    height: 30px;    background: #FCC491;    position: absolute;    z-index: 0;    top: 70px;    left: 24px;    border-radius: 0 0 50px 50px}
.shirt {    width: 150px;    height: 150px;    background-image: url(https://image.flaticon.com/icons/svg/892/892449.svg);    margin-left: -39px;    z-index: 0l}
#button2 {    width: 100px;    height: 50px;    border-radius: 0;    border-style: none;    background: mediumseagreen;    color: white;    font-size: 18px;    font-weight: bold;    position: absolute;    top: 420px;    left: 120px;    z-index: 10;    border-radius: 30px;}
#cap {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/892/892439.svg);    position: absolute;    top: 50px;    left: 140px;    transform: rotateX(30deg);}
@keyframes flame {    0% {        opacity: 1    }    10% {        opacity: 0.8    }    40% {        opacity: 0.6    }    70% {        opacity: 0.4    }    100% {        opacity: 0    }}

/**********   SEction 3 ***********************/
#section3 {    width: 350px;    height: 100vh;    background: white;    overflow: hidden;    position: absolute;margin:0}
.plate {    width: 130px;    height: 130px;    background: white;    border-radius: 50%;    display: inline-block;    margin-top: 19px;left:40px;    border: 5px solid lightgrey;}
#item1 {    width: 60px;    height: 60px;    background-image: url(https://image.flaticon.com/icons/svg/135/135625.svg);    position: relative;    transform: scale();    background-size: cover;    top: 25px;    left: 25px}
#item2 {    width: 100px;    height: 100px;    background-image: url(https://image.flaticon.com/icons/svg/1869/1869254.svg);    position: relative;    transform: scale();    background-size: cover;    top: 15px;    left: 15px}
#item3 {    width: 100px;    height: 100px;    background-image: url(https://image.flaticon.com/icons/svg/1868/1868815.svg);    position: relative;    transform: scale();    background-size: cover;    top: 10px;    left: 15px}
#item4 {    width: 100px;    height: 100px;    background-image: url(https://image.flaticon.com/icons/svg/135/135624.svg);    position: relative;    transform: scale();    background-size: cover;    top: 10px;    left: 12px}
#item5 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/135/135664.svg);    position: relative;    transform: scale();    background-size: cover;    top: 20px;    left: 22px}
#item6 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/135/135591.svg);    position: relative;    transform: scale();    background-size: cover;    top: 20px;    left: 22px}
#item7 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/2164/2164108.svg);    position: relative;    transform: scale();    background-size: cover;    top: 20px;    left: 22px}
#item8 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/817/817416.svg);    position: relative;    transform: scale(0.8);    background-size: cover;    top: 20px;    left: 22px}
#item9 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/135/135662.svg);    position: relative;    transform: scale(1.2);    background-size: cover;    top: 20px;    left: 22px}
#item10 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/135/135542.svg);    position: relative;    transform: scale(0.8);    background-size: cover;    top: 20px;    left: 22px}
#item11 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/135/135620.svg);    position: relative;    transform: scale(0.8);    background-size: cover;    top: 20px;    left: 22px}
#item12 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/415/415733.svg);    position: relative;    transform: scale(0.8);    background-size: cover;    top: 20px;    left: 22px}
#item13 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/135/135582.svg);    position: relative;    transform: scale(1);    background-size: cover;    top: 20px;    left: 22px}
#item14 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/1135/1135549.svg);    position: relative;    transform: scale(0.8);    background-size: cover;    top: 20px;    left: 22px}
#item15 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/926/926255.svg);    position: relative;    transform: scale(1.6);    background-size: cover;    top: 25px;    left: 25px}
#item16 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/2114/2114718.svg);    position: relative;    transform: scale(1.2);    background-size: cover;    top: 25px;    left: 25px}
#item17 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/1205/1205755.svg);    position: relative;    transform: scale(1.2);    background-size: cover;    top: 25px;    left: 25px}
#item18 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/135/135588.svg);    position: relative;    transform: scale(1);    background-size: cover;    top: 25px;    left: 25px}
#item19 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/1533/1533059.svg);    position: relative;    transform: scale(1);    background-size: cover;    top: 25px;    left: 25px}
#item20 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/1868/1868956.svg);    position: relative;    transform: scale(1.3);    background-size: cover;    top: 25px;    left: 25px}
#item21 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/817/817399.svg);    position: relative;    transform: scale(0.6);    background-size: cover;    top: 25px;    left: 25px}
#item22 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/817/817395.svg);    position: relative;    transform: scale(0.6);    background-size: cover;    top: 25px;    left: 25px}
#item23 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/817/817418.svg);    position: relative;    transform: scale(0.7);    background-size: cover;    top: 25px;    left: 25px}
#item24 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/275/275747.svg);    position: relative;    transform: scale(1);    background-size: cover;    top: 25px;    left: 25px}
#item25 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/541/541732.svg);    position: relative;    transform: scale(0.7);    background-size: cover;    top: 25px;    left: 25px}
#item26 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/510/510140.svg);    position: relative;    transform: scale(0.8);    background-size: cover;    top: 25px;    left: 25px}
#item27 {    width: 80px;    height: 80px;    background-image: url(https://image.flaticon.com/icons/svg/135/135618.svg);    position: relative;    transform: scale(1);    background-size: cover;    top: 25px;    left: 25px}
#yourstable {    width: 350px;    height: 400px;    background: #FEC08F;    position: absolute;    top: 190px;    z-index: 0;}
#foodtable {    width: 4650px;    height: 170px;    background: #607D8B;    margin-top: 0px;    position: relative;    animation: foodtable 80s linear 0.1s infinite;    z-index: 100;    left: 0px;}
@keyframes foodtable {    0% {        left: 0px    }    100% {        left: -4000px    }}
@keyframes item1 {    to {        top: 205px;        left: 0px;        position: fixed    }}
@keyframes item2 {    to {        top: 205px;        left: 70px;        position: fixed    }}
@keyframes item3 {    to {        top: 205px;        left: 150px;        position: fixed    }}
@keyframes item4 {    to {        top: 205px;        left: 250px;        position: fixed    }}
@keyframes item5 {    to {        top: 270px;        left: 0px;        position: fixed;        transform: rotateZ(10deg)    }}
@keyframes item6 {    to {        top: 270px;        left: 70px;        position: fixed;    }}
@keyframes item7 {    to {        top: 270px;        left: 150px;        position: fixed;        transform: rotateZ(-40deg)    }}
@keyframes item8 {    to {        top: 270px;        left: 205px;        position: fixed;        transform: rotateZ(20deg)    }}
@keyframes item10 {    to {        top: 340px;        left: 5px;        position: fixed;        transform: rotateZ(-10deg);        transform: scale(0.9)    }}
@keyframes item11 {    to {        top: 340px;        left: 70px;        position: fixed;        transform: rotateZ(-10deg);        transform: scale(0.7)    }}
@keyframes item12 {    to {        top: 340px;        left: 130px;        position: fixed;        transform: rotateZ(-10deg);        transform: scale(0.7)    }}
@keyframes item13 {    to {        top: 340px;        left: 182px;        position: fixed;        transform: rotateZ(-10deg);        transform: scale(0.8)    }}
@keyframes item14 {    to {        top: 340px;        left: 220px;        position: fixed;        transform: rotateZ(90deg) scale(0.8);    }}
@keyframes item16 {    to {        top: 340px;        left: 265px;        position: fixed;        transform: rotateZ(0deg) scale(1);    }}
@keyframes item15 {    to {        top: 400px;        left: 5px;        position: fixed;        transform: rotateZ(90deg) scale(1);    }}
@keyframes item17 {    to {        top: 400px;        left: 90px;        position: fixed;        transform: rotateZ(0deg) scale(1);    }}
@keyframes item18 {    to {        top: 400px;        left: 180px;        position: fixed;        transform: rotateZ(0deg) scale(1);    }}
@keyframes item19 {    to {        top: 400px;        left: 250px;        position: fixed;        transform: rotateZ(0deg) scale(1);    }}
@keyframes item20 {    to {        top: 460px;        left: 5px;        position: fixed;        transform: rotateZ(0deg) scale(1);    }}
@keyframes item21 {    to {        top: 460px;        left: 60px;        position: fixed;        transform: rotateZ(0deg) scale(0.6);    }}
@keyframes item23 {    to {        top: 460px;        left: 100px;        position: fixed;        transform: scale(0.5);    }}
@keyframes item24 {    to {        top: 460px;        left: 140px;        position: fixed;        transform: rotateZ(0deg) scale(0.7);    }}
@keyframes item27 {    to {        top: 460px;        left: 190px;        position: fixed;        transform: rotateZ(20deg) scale(0.7);    }}
@keyframes item9 {    to {        top: 470px;        left: 255px;        position: fixed;        transform: rotateZ(-90deg)    }}

</style>
   </head>   <body>      <div id="birthday">         <div id="section1" >            <div id="top1"></div>            <div id="cartoons">               <div id="cartoon1">                  <div id="hat1"></div>               </div>               <div id="cartoon2">                  <div id="hat2"></div>               </div>               <div id="cartoon3">                  <div id="hat2"></div>               </div>            </div>            <div id="backsection1"></div>            <h1 id="wish">               <div id="happy">                  <span style= "color:#00A1EF">H</span><span style= "color:#00B67D">a</span><span style= "color:#FF007A">p</span><span style= "color:#CF00C7">p</span><span style= "color:#FF652D">y</span>               </div>               <span id="birth" style="color:#D2001B;display:block">Birthday</span>               <span id="you" style="color:#00A2EA;display:block;font-size:20px;">Coding Times</span>            </h1>            <button id="button1" style="font-size: 10px;">Cake and Candle Click Here</button>         </div>         <div id ="section2" style="display:none" >            <div id="cake" >               <div id="layer1">                  <div id="cream"></div>               </div>               <div id="layer3">                  <div id="circ1">                     <div class="circ"></div>                  </div>                  <div id="circ2">                     <div class="circ"></div>                  </div>                  <div id="circ3">                     <div class="circ"></div>                  </div>                  <div id="circ4">                     <div class="circ"></div>                  </div>                  <div id="circ5">                     <div class="circ"></div>                  </div>               </div>               <div id="layer2"></div>               <div id="layer4"></div>               <div class="candle1">                  <div class="flame1"></div>               </div>               <div class="baloon">                  <div id="ballon1"></div>                  <div id="ballon2"></div>               </div>            </div>            <div id="table"></div>            <div id="virat">               <div id="head" style="z-index:10;">                  <div id="hair"></div>                  <div id="eye1" class="eye">                     <div class="iris"></div>                  </div>                  <div id="eye2" class="eye">                     <div class="iris"></div>                  </div>                  <div id="mouth"></div>               </div>               <div class="neck"></div>               <div class="shirt"></div>               <div class="pant"></div>            </div>            <div id="cap"></div>            <button id="button2">Let's Party</button>         </div>         <div id="section3" style="display:none" >            <div id="foodtable">               <div id="plate1" class="plate">                  <div id="item1"></div>               </div>               <div id="plate2" class="plate">                  <div id="item2"></div>               </div>               <div id="plate3" class="plate">                  <div id="item3"></div>               </div>               <div id="plate4" class="plate">                  <div id="item4"></div>               </div>               <div id="plate5" class="plate">                  <div id="item5"></div>               </div>               <div id="plate6" class="plate">                  <div id="item6"></div>               </div>               <div id="plate7" class="plate">                  <div id="item7"></div>               </div>               <div id="plate8" class="plate">                  <div id="item8"></div>               </div>               <div id="plate9" class="plate">                  <div id="item9"></div>               </div>               <div id="plate10" class="plate">                  <div id="item10"></div>               </div>               <div id="plate11" class="plate">                  <div id="item11"></div>               </div>               <div id="plate12" class="plate">                  <div id="item12"></div>               </div>               <div id="plate13" class="plate">                  <div id="item13"></div>               </div>               <div id="plate14" class="plate">                  <div id="item14"></div>               </div>               <div id="plate15" class="plate">                  <div id="item15"></div>               </div>               <div id="plate16" class="plate">                  <div id="item16"></div>               </div>               <div id="plate17" class="plate">                  <div id="item17"></div>               </div>               <div id="plate18" class="plate">                  <div id="item18"></div>               </div>               <div id="plate19" class="plate">                  <div id="item19"></div>               </div>               <div id="plate20" class="plate">                  <div id="item20"></div>               </div>               <div id="plate21" class="plate">                  <div id="item21"></div>               </div>               <div id="plate23" class="plate">                  <div id="item23"></div>               </div>               <div id="plate24" class="plate">                  <div id="item24"></div>               </div>               <div id="plate27" class="plate">                  <div id="item27"></div>               </div>            </div>            <div id="yourstable"></div>         </div>      </div>

//Created By Naseer Ullah
window.onload = function () {
    let birthday = document.getElementById("birthday");    let section1 = document.getElementById("section1");    let button1 = document.getElementById("button1");    let section2 = document.getElementById("section2");    let cake = document.getElementById("cake");    let virat = document.getElementById("virat");    let cap = document.getElementById("cap");    let mouth = document.getElementById("mouth");    let button2 = document.getElementById("button2");    let flame1 = document.getElementsByClassName('flame1')[0]
    let section3 = document.getElementById("section3");    let item1 = document.getElementById("item1");    let item2 = document.getElementById("item2");    let item3 = document.getElementById("item3");    let item4 = document.getElementById("item4");    let item5 = document.getElementById("item5");    let item6 = document.getElementById("item6");    let item7 = document.getElementById("item7");    let item8 = document.getElementById("item8");    let item9 = document.getElementById("item9");    let item10 = document.getElementById("item10");    let item11 = document.getElementById("item11");    let item12 = document.getElementById("item12");
    let item13 = document.getElementById("item13");    let item14 = document.getElementById("item14");    let item15 = document.getElementById("item15");    let item16 = document.getElementById("item16");    let item17 = document.getElementById("item17");    let item18 = document.getElementById("item18");    let item19 = document.getElementById("item19");    let item20 = document.getElementById("item20");    let item21 = document.getElementById("item21");    let item22 = document.getElementById("item22");    let item23 = document.getElementById("item23");    let item24 = document.getElementById("item24");    let item25 = document.getElementById("item25");    let item26 = document.getElementById("item26");    let item27 = document.getElementById("item27");
    button1.onclick = function () {
        section1.style.display = "none";        section2.style.display = "block";        cake.setAttribute("style", "animation:cake 6s ease-in 0.1s 1;animation-fill-mode:forwards;transform-origin: 20% 40%;");        virat.setAttribute("style", "animation:virat 1s linear 8s 1;animation-fill-mode:forwards;");
        mouth.setAttribute("style", " animation:mouth 8s linear 10s 1;z-index:1;");
        cap.setAttribute("style", " animation:bounce-in-top 1.1s both;animation-delay:9s;");
        flame1.setAttribute("style", " animation:flame 3s linear 10s 1;animation-fill-mode:forwards");

button2.setAttribute("style", "animation:bounce-in-top 1.1s both;animation-delay:22s;");
        // section3 starts  ******************************* 
        button2.onclick = function () {
            section1.style.display = "none";            section2.style.display = "none";            section3.style.display = "block";
            item1.onclick = function () {                item1.setAttribute('style', 'animation:item1 1s linear 0.1s 1;animation-fill-mode:forwards;transition: all 0.5s ease;')
            }

item2.onclick = function () {                item2.setAttribute('style', 'animation:item2 1s linear 0.1s 1;animation-fill-mode:forwards;transition: all 0.5s ease;')
            }
            item3.onclick = function () {                item3.setAttribute('style', 'animation:item3 1s linear 0.1s 1;animation-fill-mode:forwards')
            }
            item4.onclick = function () {                item4.setAttribute('style', 'animation:item4 1s linear 0.1s 1;animation-fill-mode:forwards')
            }
            item5.onclick = function () {                item5.setAttribute('style', 'animation:item5 1s linear 0.1s 1;animation-fill-mode:forwards')
            }

item6.onclick = function () {                item6.setAttribute('style', 'animation:item6 1s linear 0.1s 1;animation-fill-mode:forwards')
            }

item7.onclick = function () {                item7.setAttribute('style', 'animation:item7 1s linear 0.1s 1;animation-fill-mode:forwards')
            }

item8.onclick = function () {                item8.setAttribute('style', 'animation:item8 1s linear 0.1s 1;animation-fill-mode:forwards')
            }
            item9.onclick = function () {                item9.setAttribute('style', 'animation:item9 1s linear 0.1s 1;animation-fill-mode:forwards')
            }

item10.onclick = function () {                item10.setAttribute('style', 'animation:item10 1s linear 0.1s 1;animation-fill-mode:forwards')
            }
            item11.onclick = function () {                item11.setAttribute('style', 'animation:item11 1s linear 0.1s 1;animation-fill-mode:forwards')
            }
            item12.onclick = function () {                item12.setAttribute('style', 'animation:item12 1s linear 0.1s 1;animation-fill-mode:forwards')
            }

item13.onclick = function () {                item13.setAttribute('style', 'animation:item13 1s linear 0.1s 1;animation-fill-mode:forwards')
            }
            item14.onclick = function () {                item14.setAttribute('style', 'animation:item14 1s linear 0.1s 1;animation-fill-mode:forwards')
            }
            item15.onclick = function () {                item15.setAttribute('style', 'animation:item15 1s linear 0.1s 1;animation-fill-mode:forwards')
            }

item16.onclick = function () {                item16.setAttribute('style', 'animation:item16 1s linear 0.1s 1;animation-fill-mode:forwards')
            }
            item17.onclick = function () {                item17.setAttribute('style', 'animation:item17 1s linear 0.1s 1;animation-fill-mode:forwards')
            }

item18.onclick = function () {                item18.setAttribute('style', 'animation:item18 1s linear 0.1s 1;animation-fill-mode:forwards')
            }

item19.onclick = function () {                item19.setAttribute('style', 'animation:item19 1s linear 0.1s 1;animation-fill-mode:forwards')
            }

item20.onclick = function () {                item20.setAttribute('style', 'animation:item20 1s linear 0.1s 1;animation-fill-mode:forwards')
            }
            item21.onclick = function () {                item21.setAttribute('style', 'animation:item21 1s linear 0.1s 1;animation-fill-mode:forwards')
            }

item23.onclick = function () {                item23.setAttribute('style', 'animation:item23 1s linear 0.1s 1;animation-fill-mode:forwards')
            }
            item24.onclick = function () {                item24.setAttribute('style', 'animation:item24 1s linear 0.1s 1;animation-fill-mode:forwards')
            }

item27.onclick = function () {                item27.setAttribute('style', 'animation:item27 1s linear 0.1s 1;animation-fill-mode:forwards')
            }
        }

}

};

</script>

</body></html>

Coding Flutter Top Posts

Coding Timer

Happy Birth Day Stylish Animations Through CSS, Html and JavaScript

Post a Comment

0 Comments

Donate & Support

Labels

Report Abuse

Popular Posts

What is Flutter? A complete beginners guide to flutter in 2024; Learn Flutter from scratch

How To Create Spider Animations In Web Using CSS And HTML

A Swipable PageView BottomNavigationBar in flutter using PageController

Facebook

MOBILE APP DEVELOPMENT

Contributors

Recent Posts

Contact Us

Categories

Random Posts

Menu Footer Widget

Coding Flutter Top Posts

Coding Timer

Happy Birth Day Stylish Animations Through CSS, Html and JavaScript

You may like these posts

Post a Comment

0 Comments

Donate & Support

Labels

Report Abuse

Social Plugin

Popular Posts

What is Flutter? A complete beginners guide to flutter in 2024; Learn Flutter from scratch

How To Create Spider Animations In Web Using CSS And HTML

A Swipable PageView BottomNavigationBar in flutter using PageController

Facebook

MOBILE APP DEVELOPMENT

Contributors

Recent Posts

Contact Us

Categories

Random Posts

Menu Footer Widget