.steam {
position: absolute;
display: flex;
box-sizing: border-box;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 20px;
justify-content: space-around;
opacity: 0.3;
z-index: -1;
}
.steam span {
position: relative;
bottom: 0px;
display: block;
margin: 0;
min-width: 8px;
height: 120px;
background-color: #fff;
border-radius: 50%;
animation: steamup 5s linear infinite;
opacity: 0;
filter: blur(8px);
animation-delay: calc(var(--i) * 0.5s);
}
@keyframes steamup {
0% {
transform: translateY(0px) scaleX(1, 1);
opacity: 0;
}
15% {
opacity: 1;
}
50% {
transform: translateY(-150px) scale(2);
}
95% {
opacity: 0;
}
100% {
transform: translateY(-300px) scale(5);
}
}