.sweep {
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin: .2em 0
}

.sweep::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    animation: a-ltr-after 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(-101%);
    animation-delay: .05s;
}

.sweep::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
    animation: a-ltr-before 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(0);
    animation-delay: .05s;
}

@keyframes a-ltr-after {
    0% { transform: translateX(-100%) }
    100% { transform: translateX(101%) }
}

@keyframes a-ltr-before {
    0% { transform: translateX(0) }
    100% { transform: translateX(200%) }
}