28172 sujets

CSS et mise en forme, CSS3

Transitions et animations CSS3

Bonjour

Dans le cadre de la modernisation de mes pages, je cherche à remplacer des animations que j'ai développées en JavaScript, basées sur des timers et le recalcul des positions des éléments, par quelque chose de plus "à la mode".

J'essaie donc de faire quelques expériences très simples en utilisant les transitions et animations CSS3.

Dans mon exemple, j'ai une div "cadre" (position:relative;overlow:hidden) dans laquelle "circule" une div "train" (position:absolute;display:table-row) qui elle même comporte des div "wagon" (display:table-cell).

voir http://www.alma-musica.net/tests/train.html

Le "train" étant plus large que le cadre, l'objectif est de le faire défiler de droite à gauche jusqu'à ce que le dernier "wagon" devienne visible (donc le train ait "right:0") et reparte dans l'autre sens jusqu'à "left:0".

Je n'arrive pas à exprimer cette transition: en effet "left" et "right" sont antinomiques.
SI je dis 

#train { /*.......*/
    transition:left:20s, right 20s;}
#train:hover {right:0;left:;}
le train passe brutalement d'un état dans l'autre, c'est à dire que la transition de fonctionne pas.
Je comprends bien pourquoi, mais y a-t-il un moyen de faire fonctionner cela comme une transition CSS3 ou faut il passer, pour une chose aussi simple, par un mécanisme plus complexe?
Modifié par PapyJP (01 Mar 2015 - 12:00)
Bonjour,

avez-vous essayé avec une transformation, pour pousser le bloc avec les trains par exemple:

transform: translate3d(27px, 0px, 0px);
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -ms-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;

Voir l'article sur le site
soldavox a écrit :
Bonjour,

avez-vous essayé avec une transformation, pour pousser le bloc avec les trains par exemple:

transform: translate3d(27px, 0px, 0px);
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -ms-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;

Voir l'article sur le site


Merci de la réponse.
Tant qu'à ne pas pouvoir le faire avec une transition (si j'ai bien compris ça ne fait que des choses sans grand intérêt) et pour éviter les multiples préfixes selon les navigateurs, j'ai fait un saut par dessus les transitions CSS3 et je suis passé directement à l'utilisation de jQuery. voir http://forum.alsacreations.com/topic-5-74991-1-AnimationjQuery.html
Au moins on peut faire confiance à l'équipe de développement de jQuery pour gommer les différences entre navigateurs.
Comme de bien entendu l'animation ne fonctionne pas avec left:0 dans un sens et right:0 dans l'autre, il faut passer par ce que je voulais éviter, c'est à dire calculer la largeur des éléments et en déduire le déplacement de la marge gauche.
Moyennant quoi le train oscille bien dans les deux sens.
Bon, ça doit représenter tout au plus 5% du code, et il me reste encore plein de choses à migrer. Je n'ai pas encore déterminé si ça en vaut la peine...
Sujet clos
Aller à