Sequential CSS Transitions

While making this journal I discovered a neat trick for animating list elements sequentially without having to use javascript.

It involves CSS Custom Properties and animation-delay.

The Trick

What I didn’t know before is that you can set a CSS variable as a html inline style and that can be picked up to be used by your stylesheets. So when you loop out elements you can do something like this:

<div v-for="(post, index) in posts" :key="index" :style="{'--index': index}" class="post">
    My post is in here here
</div>

See the --index property that’s being set? That will put an incremental number into your elements that can then be used in your stylesheets. Pretty cool. That example uses Vuejs to loop but you can do it however you want. So, in your CSS you can do this:

.post {
    animation: showPosts 1s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: calc(0.1s * var(--index));
}
@keyframes showPosts {
    0% {
        transform: translateX(60px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

The --index property is per element so the first one will be 0, second 1 etc meaning the animation is delayed slightly more the further down the list it is. You can see it working on my homepage.