I try to display over my background "bubbles" images of bubbles, which appear randomly at the bottom of my web page and go up to the top before destroying themselves.

i have a ts file with css code :

export const Bubble2 = styled("section")`
position: absolute;
width: 100px;
height: 100px;
left: 30%;
bottom: 0;
background: #fff;
border-radius: 50%;
opacity: 0.5;
animation: flying 10s infinite ease-in;

@keyframes flying {
    0% {

        transform: translateX(0);
    }
    25% {
        transform: translateX(10%);
    }
    50% {
        transform: translateX(-20%);
    }
    100% {
        bottom: 99%;
        transform: translateX(5%);
    }
}
`;

But I can't use nth-child in this, or nothing happened when I call that...