[Résolu] Animation SVG

Bonjour,

J'ai besoin d'explications, je teste les animations svg

J'ai deux losanges déclarés en svg:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 350">
        <rect x="-80" y="-80" width="200" height="200" transform="rotate(45)" id="carre1" class="st0"/>
        <rect x="-100" y="-100" width="200" height="200" transform="rotate(45)" id="carre2" class="st0" />
    </svg>

Et je veux (bêtement) faire un fade-in (d'où opacity: 0) et en même temps une translation de la gauche vers la droite:

@keyframes mes_carres {
            0% {
                opacity: 0;
            }
            100% {
                transform: translateX(100px);
                opacity: 1;
            }
        }

        #carre1,
        #carre2 {
            animation: mes_carres 10s ease;
        }

Je ne comprends pas pourquoi:
1. la rotation est prise en compte dans l'animation?
2. le sens de l'animation est de droite à gauche?
3. une fois l'animation finie, le svg reprend sa position initiale?

Si quelqu'un pouvait m'éclairer sur ces trois points...

Merci beaucoup

Salut,

Alors :

1. en fait tu applique déjà un transofrm:rotate(45); donc en fait ton animation va de transofrm:rotate(45); à transofrm:rotate(0) translateX(100px); mais le rotate(0) n'est pas explicite, tu override tout ce qu'il y a dans transform quand tu écris un nouveau transform. Il faut que tu rajoute rotate(45) en plus pour qu'il la garde.

Par contre il y a un autre soucis entre la déclaration inline du transform="rotate(45)" et la facon dont on le fait en CSS transofrm:rotate(45deg) notament avec l'unité je pense... chez moi ca casse tout... je préfère tout gérer en CSS

2. Heu la j'ai rien vu de tel

3. il faut lui dire explicitement de garder l'état final (forwards) : animation: mes_carres 10s ease forwards;

https://jsfiddle.net/1hpwdgz8/8/

Hello _laurent,

Clair, net, précis et sans bavure : j'ai tout compris

Merci beaucoup

PS: je n'avais pas géré rotate() par CSS pour le paint des rectangles, j'avais cru comprendre que le support / la syntaxe est parfois différente d'un navigateur à l'autre: https://css-tricks.com/transforms-on-svg-elements/