Nous savons maintenant comment déplacer des objets dans un sens ou dans un autre. Nous allons continuer en donnant à ces objets un peu plus de dynamisme.
Ça gigote
L'animation à gauche est constituée de deux images distinctes. Une photo de table et un dessin de ballon. Les deux sont au format gif 89a ce qui leur permet d'avoir un fond transparent. A peu près tous les logiciels de dessin savent faire des images transparentes que ce soit gif, png ou les deux. Si vous n'avez pas de logiciel de dessin performant, Gimp 2 fait ça très bien. Vous trouverez le lien sur la page "Les photos". N'hésitez pas à télécharger l'aide en français à la même adresse.
Le code n'est pas bien compliqué mais il nécessite quelques explications que vous trouverez en dessous.
<style>
#foot {
position: relative;
top: 100px;
margin-left: 105px;
animation: rebond 0.35s ease infinite alternate;
-webkit-animation: rebond 0.35s ease infinite alternate;
-ms-animation: rebond 0.35s ease infinite alternate;
}
@keyframes rebond {
from {transform: translateY(0px);}
to {transform: translateY(-110px);}
}
</style>
<div style="float:left; width:420px;">
<img id="foot" src="../foot.gif" width="200" height="200">
<div style="margin-top:45px;">
<img src="../table.gif" width="400" height="300">
</div>
</div>
Le ballon (#foot) est placé dans une balise div. Son positionnement est indiqué en fonction de cette balise. Le margin-left sert à mettre le ballon au milieu de la table.
On a la possibilité de réunir les différentes propriétés animation en une seule. Ce à quoi il faut faire attention, c'est de les mettre dans le bon ordre. Nous avons name, duration, timing-function, iteration-count et direction. Si dans la notation classique animation-timing-function était facultative, ici elle est obligatoire. L'avantage de cette méthode est le gain de place ce qui entraîne un allègement de la page.
La propriété transform: est partculièrement riche. Elle est accompagnée d'une vingtaine de fonctions qui vont nous permettre de manipuler nos conteneurs au gré de notre fantaisie. La fonction translate(), comme son nom l'indique déplace un objet d'un point à un autre. Elle existe en trois versions, translate(), translatex() et translatey(). Dans notre exemple, nous avons utilisé translatey(), translatex, comme vous pouvez le deviner, fait un déplacement horizontal.
L'animation ci-dessus montre une aure utilisation de la fonction translate(). Cela va nous permettre de voir comment on peut décomposer une animation simple.
<style>
#foot2 {
position: relative;
top: 0px;
animation: rebond2 2s linear infinite alternate;
-webkit-animation: rebond2 2s linear infinite alternate;
-ms-animation: rebond2 2s linear infinite alternate;
}
@keyframes rebond2 {
from {transform: translate(0px );}
25% {transform: translate(200px, 100px);}
50% {transform: translate(400px, 0px);}
75% {transform: translate(600px, 100px);}
to {transform: translate(800px, 0px);}
}
</style>
<div style="float:left; height:300px;">
<img id="foot2" src="../foot.gif" width="200" height="200">
</div>
<br clear="all"><br>
Il n'y a rien de spécial à dire sur la première partie du style si ce n'est l'utilisation de linear à la place de ease afin de donner une régularité à l'animation. La deuxième partie est plus intéressante. Entre le point de départ (from) et le point d'arrivée (to), nous avons 3 étapes intermédiaires exprimées en pourcentages du temps total de l'animation. Notre animation progresse par tranches de 25% ce qui veut dire que chaque déplacement va durer une demie seconde. Le ballon progresse de 200 pixels horizontalement à chaque étape et de 100 pixels verticalement dans un sens puis dans l'autre.
La fonction translate() supporte deux valeurs. La première correspond au déplacement horizontal, la deuxième au déplacement vertical.
Je l'aime bien mon petit ballon (j'aime pas le foot). On sait le faire rebondir, cette fois on va le faire tourner. Pour cela, nous avons la fonction rotate() qui porte bien son nom, elle sert à appliquer une rotation à un objet. Elle accepte une valeur qui peut être exprimée en degrés (deg), radians (rad), grades (grad ou gon) ou bien en tour (turn qui vaut 360 degrés).
<style>
#ballon{
position: relative;
top: 0px;
left: 0px;
float: left;
margin-right: 10px;
animation: tourne 3s linear infinite;
-webkit-animation: tourne 3s linear infinite;
-ms-animation: tourne 3s linear infinite;
}
@keyframes tourne{
from {transform: rotate(0);}
to {transform: rotate(360deg);}
}
</style>
<img id="ballon" src="../foot.gif" width="200" height="200">
Maintenant vous connaissez le principe, il n'est donc pas nécessaire de le décrire. La seule chose qu'on puisse dire, c'est que pour faire tourner le ballon dans l'autre sens, il aurait fallu que je mette -360deg.
Ça continue à tourner. Il y a cependant une grosse différence avec l'exemple précédent. Si le ballon tourne sur lui-même, l'aiguille tourne autour d'un axe situé près d'une des extrémités. Par défaut, l'axe de rotation est situé au centre de l'objet. Pour remédier à ce qui peut être un inconvénient, nous avons la propriété transform-origin:.
<style>
#aiguille {
position: relative;
top: -96px;
left: -116px;
width: 15px;
height: 100px;
animation: aiguille 10s linear infinite;
-webkit-animation: aiguille 10s linear infinite;
-ms-animation: aiguille 10s linear infinite;
transform-origin: center 92%;
}
@keyframes aiguille{
from {transform: rotate(0);}
to {transform: rotate(360deg);}
}
</style>
<div style="margin: 0px; padding: 0px; float:left; margin-right:8px;">
<img src="../cadran.gif" width="210" height="210">
<img id="aiguille" src="../fleche.gif" width="15" height="100">
</div>
Encore une fois il y a peu à dire sur le code. Nous avons deux images, le cadran et l'aiguille et tout réside dans le placement de ces deux objets. Tout se passe dans le style de "aiguille". C'est assez minutieux car il faut que l'aiguille soit bien centrée sur le cadran. Si je peux me permettre un conseil, mettez en place les objets avant de les animer. Sur l'exemple, en mettant un point au centre du cadran, il sera plus facile de placer l'aiguille. L'axe de rotation de l'aiguille a été placé hrizontalement au centre et verticalement à 92% de la hauteur de l'image de l'aiguille en partant du haut. Les valeurs exprimées peuvent l'être de différentes façons. Tout d'abord il y a les unités traditionnelles comme px, pt... ou bien en pourcentage (0% représente la gauche ou bien le haut, 100% représente la droite ou le bas). On peut utiliser les mots clés left, center et right pour l'axe horizontal et top, center et bottom pour l'axe vertical. Il existe un troisième axe (Z) dont on parlera pour les animations 3D.