Estoy tratando de hacer una animación donde el globo se hace grande y luego estalla en partículas usando javascript. Solo logré que el globo tenga una gran animación, pero ¿cómo puedo implementar un efecto para la explosión?
Aquí está el código para eso.
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>