A versatile keyframe animation configured using css variables #css

configurable-keyframe-anim.css

@keyframes fadeInX {
    from {
        opacity: 0;
        transform: translateX(var(--fadeInDist, 1rem));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.example {
    --fadeInXDist: -3rem;
    animation: fadeInX 1s ease;
}