I'm trying to make an animation where the balloon gets big and then bursts into particles using javascript. I've only managed to make the balloon getting big animation but how can I implement an effect for the burst?
Here's the code for that.
balloon = document.querySelector('.balloon');
setInterval(function(){
balloon.style.width = '400px';
balloon.style.height = '400px';
balloon.style.transition = '3s';
// reduce size to normal
setTimeout(function() {
balloon.style.width = '100px';
balloon.style.height = '100px';
}, 1000);
}, 3000);body { margin:20px; background:hsl(70, 31%, 85%); text-align:center; }
.balloon {
display:inline-block;
width:120px;
height:145px;
background:hsl(215,50%,65%);
border-radius:80%;
position:relative;
box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
margin:20px 30px;
transition:transform 0.5s ease;
z-index:10;
animation:balloons 4s ease-in-out infinite;
transform-origin:bottom center;
}
@keyframes balloons {
0%,100%{ transform:translateY(0) rotate(-4deg); }
50%{ transform:translateY(-25px) rotate(4deg); }
}
.balloon:before {
content:"▲";
font-size:20px;
color:hsl(215,30%,50%);
display:block;
text-align:center;
width:100%;
position:absolute;
bottom:-12px;
z-index:-100;
}<!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>Balloon</title>
</head>
<body>
<div class="balloon">
</div>
</body>
</html>