animation ombre

@property --direction {
    syntax: "<percentage>";
    inherits: false;
    initial-value: -150%;
}

@keyframes directionombre {
    0%{--direction:-150%}
    25%{--direction:50%}
    50%{--direction:150%}
    75%{--direction:440%}
    75.1%{--direction:-440%}
}
.mercure{
    --taille:50px;
    translate:600px 0px; 
    background-image: url(mediabordel/merc.png);
    background-size: 100%;

    &::after{
        animation: directionombre 15s linear infinite reverse;
        content: "";
        display:block;
        height:100%;width:100%;
        background-image:radial-gradient(circle at var(--direction), transparent 0%, 50%, black 80%);
        border-radius: 50%;
    }
}

code simplifié et incomplet; les lignes rouges sont celles interresantes pour l'animation.

on a un gradient, comment on anime sa position initiale? hé ben c'est pas si simple, les gradients ne sont pas diréctement animables dans des @keyframes. une solution/astuce à cela c'est un @proprety, il permet de déffinir une variable et de changer sa valeur. - c'est exactement ce que j'ai fait:
- déffini --direction,
- crée keyframes pour --direction
- crée animation: directionombre;
- et betement utilisé la variable dans un gradient
step 4: proft ;-)

autre exepmle de @proprety, codepen.io meme si'l y a trop de bordel dans le code css, ça reste une demo interresante
update: je suis un debs, c'est pour ca mon animation est bisarre, c'est censé aller de -150% a 50% et ensuite a 200%, c'est la que je me suis trompé...