Scribd
Upload
39 views2 pages

Howtouse Confetti Animation

Uploaded by

pksj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
39 views2 pages

Howtouse Confetti Animation

Uploaded by

pksj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

A CSS/CSS3 only solution to create confetti falling animation on your webpage.

How to use it:


1. Add DIV elements to hold the confetti.

<div id="confettis">
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
</div>
2. The core CSS for the confetti animation.

#confettis {
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
}

.confetti {
left: 50%;
width: 16px;
height: 16px;
position: absolute;
transform-origin: left top;
animation: confetti 5s ease-in-out -2s infinite;
}

@keyframes confetti {
0% {
transform: rotateZ(15deg) rotateY(0deg) translate(0, 0);
}
25% {
transform: rotateZ(5deg) rotateY(360deg) translate(-5vw, 20vh);
}
50% {
transform: rotateZ(15deg) rotateY(720deg) translate(5vw, 60vh);
}
75% {
transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw, 80vh);
}
100% {
transform: rotateZ(15deg) rotateY(1440deg) translate(10vw, 110vh);
}
}
3. Apply a delay to each confetti.

.confetti:nth-child(1) {
left: 10%;
animation-delay: 0;
background-color: #fc0120;
}
.confetti:nth-child(2) {
left: 20%;
animation-delay: -5s;
background-color: #8257e6;
}

.confetti:nth-child(3) {
left: 30%;
animation-delay: -3s;
background-color: #ffbf4d;
}

.confetti:nth-child(4) {
left: 40%;
animation-delay: -2.5s;
background-color: #fe5d7a;
}

.confetti:nth-child(5) {
left: 50%;
animation-delay: -4s;
background-color: #45ec9c;
}

.confetti:nth-child(6) {
left: 60%;
animation-delay: -6s;
background-color: #f6e327;
}

.confetti:nth-child(7) {
left: 70%;
animation-delay: -1.5s;
background-color: #f769ce;
}

.confetti:nth-child(8) {
left: 80%;
animation-delay: -2s;
background-color: #007de7;
}

.confetti:nth-child(9) {
left: 90%;
animation-delay: -3.5s;
background-color: #63b4fc;
}

.confetti:nth-child(10) {
left: 100%;
animation-delay: -2.5s;
background-color: #f9c4ea;
}

You might also like