[Résolu] Tutoriel animation CSS3

Bonjour

Maintenant que -- semble-t-il --la plupart des navigateurs supportent les animations sous CSS3, j'aimerais modifier certaines pages des sites que je gère, dans lesquels les animations sont faites en javascript.
Pour cela j'ai voulu m'instruire en lisant les tutoriels d'Alsacréation, qui sont généralement clairs et bien faits, et notamment l'article http://www.alsacreations.com/article/lire/1418-css3-transformations-2d.html

J'ai essayé les "démonstrations" de cet article, mais je constate qu'elles affichent l'image résultant de la transformation, et pas une animation montrant comment on passe de l'image originelle à l'image finale.

Mon navigateur est Firefox 26.0, soit la dernière version de Firefox, ce ne doit donc pas être un problème de version de navigateur.
Quelqu'un peut il éclairer ma lanterne?
Merci
JP

Bonjour PapyJP

En effet les transformations CSS3 ne sont pas des animations mais des manipulations de propriétés afin de visualiser un résultat dès le début: ex rotate(45deg) fera que la cible ait une rotation de 45 degré mais pas "fasse" une rotation de 45 degré.

Pour arriver à créer une animation vous pouvez utiliser la propriété CSS3 @keyframes exemple:

#div{
    width:100px;
    height:100px;
    background: #000;
    animation:myRotation 2s infinite;
    -webkit-animation:myRotation 2s infinite; /* Safari et Chrome */

}

@keyframes myRotation{
   from: {transform : rotate(0deg);}
   to: {transform : rotate(45deg);}
}

@-webkit-keyframes myRotation{
   from: {-webkit-transform : rotate(0deg);}
   to: {-webkit-transform : rotate(45deg);}
}

Attention, il y a toujours un problème de compatibilité , IE9 et antérieur ne gèrent pas le @keyframes. Un angle de solution pour pallier à ce problème serait peut être d'utiliser modernizer et d'utiliser une fonction javascript si le navigateur n'est pas compatible.

sinon on peut démarrer un mouvement (non une animation) en déterminant le facteur déclencheur et on apporte les modifications... on attribuera une valeur de transition pour adoucir le mouvement.
exemple:

#div{
    width:100px;
    height:100px;
    background: #000;
    -webkit-transform:rotate(0deg);   /* Safari et chrome */
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    -webkit-transition:all 2s ease;  /* ici on définie les valeurs de transition */
    -moz-transition:all 2s ease;
    -ms-transition:all 2s ease;
    -o-transition:all 2s ease;
    transition:all 2s ease;
}

#div:hover{      /* ici on définie l'action déclencheur (survol) et on applique la transformation */
    -webkit-transform:rotate(45deg);   /* Safari et chrome */
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

là ça effectuera un simple mouvement...

Voilà sur ce que je sais des animations CSS3

Merci Peter, j'ai effectivement confondu "transformations" et "animations".
Alles klar!, comme on dit de l'autre côté du Rhin!