How to put delay in this grid animation?

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

Solution

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 class="grid">
        <div class="grid__item">
            <span class="grid__text">facebook</span>
        </div>
        <div class="grid__item">
            <span class="grid__text">instagram</span>
        </div>  
        <div class="grid__item">
            <img class="grid__image" src="https://i.imgur.com/YEm0MAO.png">
        </div>
        <div class="grid__item">
            <img class="grid__image" 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); }
}