How to put delay in this grid animation?-CodePudding

my name is Gustavo and I'm making a social media animation with css for my streaming overlay.

The thing is I want each to each child in the grid to have an additional 0.5s in the animation-delay. But I've tried in several ways, and I can't make it work.

I tried using :nth-child() in the .grid class to add 0.5s in the animation-delay to each child , but it didn't work. Can someone help me to make this work?

link to see the code: https://codepen.io/gustavo-nicolla/pen/jOzJXKd

CodePudding user response：

You're pretty much along the right lines with your attempt to solve your issue.

If you use the code below you will get what you want, assuming I've understood your description properly. I've also created a working codepen so you can check that out.

HTML

<body>
    <div >
        <div >
            <span >facebook</span>
        </div>
        <div >
            <span >instagram</span>
        </div>  
        <div >
            <img  src="https://i.imgur.com/YEm0MAO.png">
        </div>
        <div >
            <img  src="https://i.imgur.com/zbMfFay.png">
        </div>
    </div>
</body>

SCSS

body {
    background-color: black;
}

.grid {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(2, 200px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    &__item {
        display: grid;
        place-content: center;
        overflow: hidden;

        & > * {
            opacity: 0;
            animation: show-text-down 8s infinite;      
        }

        &:nth-child(2) {
            & > * {
                animation-delay: .5s;
            }
        }

        &:nth-child(3) {
            & > * {
                animation-delay: 1s;
            }
        }

        &:nth-child(4) {
            & > * {
                animation-delay: 1.5s;
            }
        }
    }

    &__text {
        font-family: Roboto, Arial, sans-serif;
        font-size: 22px;
        color: white;
    }

    &__image {
        width: 30px;
        height: 30px;
    }
}

@keyframes show-text-down {
    0%, 10% { opacity: 1; transform: translate3d(0, -100%, 0); }
    30%, 60% { opacity: 1; transform: translate3d(0, 0, 0); }
    90%, 100% { opacity: 1; transform: translate3d(0, -100%, 0); }
}