Après avoir vu les bases des animations, nous allons avancer un peu en voyant quelques notions qui laissent présager des présentations originales. Avant de commencer, je vous rappelle que vos pages doivent impérativement commencer par les deux lignes suivantes afin que les navigateurs reconnaissent le HTML 5 et le CSS 3.


 Ballon 


Lorsque vous voulez faire une animation (un logo animé par exemple), la première chose à faire, est de la décomposer en étapes.
    1. Apparition du carré
    2. Transformation en cercle
    3. Déplacement et transformation en ellipse
    4. Transformation en cercle
    5. Apparition du ballon


On sait ce que l'on veut faire, on va mettre notre matériel en place. Nous allons utiliser trois balises <div>. La première balise, #ballon, contient le ballon. On la déclare en premier de façon à ce qu'elle soit au "fond" de notre animation. La deuxième, #mute2, sert de conteneur à la forme qui va se déplacer. Elle contient la troisième balise, #mute, qui est vide et se contente de se promener.

Bien que cela ne soit pas important, pour plus de clarté, j'ai mis les styles dans l'ordre d'affichage des balises <div>. Un détail qui a son importance, il faut décrire les différents éléments de l'animation à leur emplacement de fin et non à la position de départ. La raison est bien simple. Une fois l'animation terminée, chaque élément reprend sa position initiale. Si vous n'exécutez votre animation qu'une fois, il y a de fortes chances que le résultat final soit plus intéressant que la position de départ.

Il n'y a rien de particulier dans le style de #ballon si ce n'est que la propriété visibility est fixée à hidden. Le ballon ne sera affiché qu'en fin d'animation dans @keyframes ballon {}.

Le conteneur #mute2 n'est présent que pour faciliter l'apparition du carré au début de l'animation à l'aide de la propriété overflow qui empêche l'affichage du contenu extérieur au conteneur. On ne fixe pas sa largeur car #mute va devoir se déplacer horizontalement.

Le carré du départ va se transformer en cercle grâce à la propriété border-radius qui arrondit les angles. La propriété accepte quatre valeurs qui correspondent aux quatre angles de notre forme. Si on ne met qu'une valeur, celle-ci sera appliquée aux quatre angles. Exemples:
border-radius: 10px 15px 20px 25px; L'angle supérieur gauche aura un arrondi dont le rayon sera de 10 pixels, l'angle supérieur droit aura un arrondi avec un rayon de 15 pixels, le rayon de l'arrondi de l'angle inférieur droit sera égal à 20 pixels et, enfin, le rayon de l'arrondi de l'angle inférieur gauche sera égal à 25 pixels. Les valeurs peuvent être notées en pourcentages ou bien à l'aide d'unités de longueur. Il existe 4 propriétés qui affectent chacunes un angle particulier. Il s'agit de border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius. Il parait évident que l'usage de border-radius est plus pratique. Si on veut ignorer un angle, il suffit de mettre 0 à la place.


Quand border-radius est arrivé, je m'étais posé la question de savoir comment faire un anneau. A voir l'illustration de gauche, il est évident que j'ai trouvé mais ma solution n'est pas franchement la meilleure si on veut un anneau régulier. J'utilise deux balises <div> l'une dans l'autre et je mets la couleur de fond de ma page comme couleur de fond du cerche intérieur.



Pour un même résultat visuel on peut n'utiliser qu'une seule balise <div> en jouant avec la bordure.



La deuxième propriété qui nous intéresse dans notre animation est la propriété transform: skewx(). Son rôle est de décaler horizontalement un conteneur (bloc div, image, lien...) à partir d'un axe défini par la propriété transform-origin:. Pour les décalages verticaux, nous avons la propriété transform: skewy(). La fonction skew() permet de donner un décalage horizontal et vertical mais est fortement déconseillée car elle est appelée à disparaitre.

L'illustration montre un décalage de 30 degrés avec deux balises <div> imbriquées.


J'ai réduit la hauteur de trans0 à 165 pixels uniquement pour l'effet visuel. Si vous remettez cette hauteur à 200 pixels vous allez pouvoir vous rendre compte de comment se comportent les balises <div> entre elles en jouant sur les marges intérieures de trans0. Ajoutez une ligne padding: 0px 105px 0 5px; au style de trans0. Vous pouvez jouer sur les différentes valeurs (Top, Right, Bottom et Left).

On peut revenir sur notre animation. Elle est composée de deux objets animés. Le carré (@keyframes mute{}) et le ballon (@keyframes ballon{}). Les deux animations démarrent en même temps et durent toutes les deux dix secondes. Ce qui intéressant ici, c'est la synchronisation des deux animations. Le ballon reste caché pendant les 8 premières secondes (80%). La rotation, quant à elle, débute à 75% ce qui fait 2,5 secondes pour faire un tour complet avant de disparaitre à nouveau.

L'animation du carré est facile à comprendre. Entre 0 et 15% on bloque le carré à gauche et on fait passer la marge supérieure de 199 à 0 pixel. Entre 15 et 30% le carré devient un cercle (border-radius) et sa couleur passe du rouge au jaune. De 30 à 45% le cercle se décale de 45 degrés et devient bleu ce qui lui donne sa forme elliptique. De 45% à 60% l'ellipse reprend sa forme circulaire en devenant rose. Entre 80 et 95% le cercle s'estompe progressivement pour laisser apparaitre le ballon qui tourne déjà depuis que l'animation en est à 81%.