28112 sujets

CSS et mise en forme, CSS3

[Résolu] Animation SVG

Bonjour,

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

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
Modérateur
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/
Sujet clos
Aller à