CSS Animations

Welcome to CSS Animations!

.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.4s; }
.card:nth-child(4) { animation-delay: 0.6s; }

@keyframes animationName {
    0% { /* starting state */ }
    50% { /* middle state */ }
    100% { /* ending state */ }
}

.element {
    animation: animationName 1s ease infinite;
    /* OR expanded: */
    animation-name: animationName;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
}