On a vu, page précédente, comment améliorer un peu la présentation des conteneurs. Maintenant, on va les rendre moins statiques en les faisant bouger un peu, toujours sans programmation.

 On se bouge 


Balise <marquee>
Avant l'arrivée de HTML 5 et de CSS 3, la seule façon de faire bouger un objet sans avoir recours à la programmation était la balise <marquee>.

• behavior="scroll/slide/alternate" : Indique comment se déplace la bannière. Je ne vois pas de différence entre les 2 premières valeurs. Alternate permet à la bannière de faire des allers-retours.
• bgcolor="couleur" : Couleur de fond de la bannière. Par défaut le fond est transparent.
• height="valeur" : Hauteur de la bannière en pixels.
• width="valeur" : Largeur de la bannière en pixels.
• direction="left/right/up/down" : Indique le sens de défilement, vers la gauche, la droite, le haut ou vers le bas.
• scrollamount="valeur" : Longueur de chaque déplacement en pixels (plus la valeur est élevée plus la vitesse est grande.
• scrolldelay="valeur" : Temps écoulé entre chaque déplacement en ms.
• loop="valeur" : Indique le nombre de fois que la bannière va défiler. Une valeur négative indique que la bannière ne s'arrête pas.

Nous avons vu le plus facile,

passons aux choses sérieuses.

---

On va s'attaquer maintenant à la propriété animation qui, comme son nom l'indique, va nous permettre à donner un peu de vie à notre page. Ne vous souciez pas de la longueur du code, c'est beaucoup plus simple qu'il parait à première vue. Nous sommes obligés d'utiliser les préfixes vendeurs en particulier pour Internet Explorer qui dans sa version 11 fait encore des siennes.

La majeure partie du code est dans la feuille de style.

width et height définissent la taille du carré.
background-color donne la couleur de fond pour les navigateurs qui ignorent la propriété animation
animation-name: donne un nom de référence à notre animation
animation-duration: indique le temps que durera l'animation. La durée est indiquée en secondes (s) ou en millisecondes (ms)
animation-iteration-count: indique le nombre de fois que l'animation va être exécutée. Vous devez donner une valeur entière positive. Si vous mettez infinite, l'animation tournera en boucle.

A ce stade, nous savons comment va fonctionner notre animation. Il ne reste plus qu'à lui dire ce qu'elle va faire. C'est ce que va expliquer la règle @keyframes à laquelle on donne le nom attribué à animation-name. Dans notre exemple, il y a deux étapes. Le point de départ et le point d'arrivée spécifiés par from et to. Notre carré va donc passer du rouge au bleu en 4 secondes. Ce qu'il faut noter, c'est la syntaxe utilisée. Nous avons une première paire d'accolades pour le @keyframes et, une autre paire d'accolades pour chaque étape.




Lorsque l'on compare le déplacement de notre carré avec le déplacement obtenu avec la balise <marquee>, il n'y a pas photo. Le CSS est beaucoup plus souple et fluide d'où l'intérêt d'utiliser la deuxième méthode. Il n'y a que deux choses qui changent dans le code du premier exemple et dans celui du deuxième. Tout d'abord il y a animation-direction: alternate; qui permet à l'animation de faire des allers-retours. On peut remplacer alternate par reverse pour que l'animation débute à la position finale. On peut également mettre les deux en les séparant par une virgule.

La deuxième chose qui change, c'est margin-left: 400px qui "pousse" le carré vers la droite de 400 pixels. On va voir dans l'exemple suivant l'intérêt d'utiliser margin-left plutôt que left. En fait, cela va nous permettre de mieux gérer la mise en place de notre animation.


On retrouve notre carré pour la troisième fois. Cette fois, j'ai mis une bordure afin de mieux percevoir le déplacement.


La grosse différence qu'il y a par rapport à l'exemple précédent c'est le fait que l'on utilise deux balises <div> pour notre carré. La première sert de conteneur pour le carré. Les deux premières propriétés float et margin-right ne sont là que pour me permettre de placer du texte à droite. Après avoir donné la taille du cadre, padding supprime les marges internes afin que le carré s'ajuste à la balise div. border-style fixe la bordure de div à la valeur par défaut. Enfin, overflow: hidden; masque le carré dès qu'il déborde du conteneur.

Cette fois encore, les différences par rapport à l'exemple précédent sont mineures. La première différence, top: -100px;, place le point dé départ de l'animation en dehors du conteneur. Les 100 pixels correspondent à la hauteur du carré. La deuxième différence, c'est le sens de déplacement. Cette fois on joue sur la propriété margin-top qui permet un déplacement vertical. Les 500 pixels correspondent aux 400 piwels du div conteneur plus les 100 pixels du point de départ.

Il existe une propriété dont je n'ai pas parlé mais qui a son importance. Il s'agit de animation-timing-function. Elle s'utilise avec les préfixes vendeurs. C'est elle qui gère le comportement de l'animation, du moins qui règle la vitesse d'exécution de l'animation. Si l'on n'utilise pas cette propriété, c'est ease qui est utilisé comme argument par défaut. les valeurs directement reconnues sont:

• ease Accélère au départ, ralentit à la fin
• linear Garde une vitesse constante
• ease-in Accélère au début
• ease-out Ralentit à la fin
• ease-in-out Accélère au début, a une vitesse constante et ralentit à la fin.

Nous avons vu notre carré fixe, en déplacement horizontal puis vertical. On va le voir une quatrième et dernière fois sur cette page. Cette fois, nous allons le déplacer en diagonale.


Comme d'habitude, on ne va pas changer grand chose afin de ne pas trop se prendre la tête. Pour cet exemple, j'ai fait essentiellement du copier-coller. Le gros du code est celui du déplacement horizontal. J'ai pris le fond sur la page formulaires et l'ombre vient de la page Restons à l'ombre.



Dans la première partie du style, carre2 devient carre4 et exemple2 devient exemple4. On ne peut pas mettre deux fois le même nom d'id dans une page, le navigateur se mélangerait les pinceaux. Dans la partie @keyframes, j'ai juste rajouté le déplacement vertical. Le carré va donc se déplacer de 400 pixels horizontalement et de 200 pixels verticalement. Enfin, les dimensions de la balise div font 500 et 300 pixels afin que le carré n'en sorte pas.