Ça peut paraître bête à dire mais lorsque l'on veut faire une animation, il est bon de savoir exactement ce que l'on veut faire. Il faut déterminer le nombre d'éléments qui vont composer l'animation et quels sont ceux qui vont subir une transformation.
Dans notre exemple, nous avons six éléments :
- Le ciel qui passe d'un bleu foncé à un bleu plus clair
- Les trois pics qui apparaissent l'un après l'autre
- Le soleil qui pointe son nez en cours de route
- L'hélico qui traverse l'animation de part en part
La photo de l'hélico a été prise de ma fenêtre de cuisine le 14 juillet après le défilé. De tels passages font sortir les appareils photos.
<style>
.ciel {
position: relative;
background-color: #1e90ff;
width: 640px;
height: 480px;
overflow: hidden;
animation-name: ciel;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#mont1 {
position: absolute;
left: 0px;
top: 0px;
width: 600px;
height: 400px;
background-color: forestgreen;
transform: skewx(10deg) rotate(45deg);
margin-top: 633px;
animation-name: mont1;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#mont2 {
position: absolute;
left: 0px;
top: 0px;
width: 240px;
height: 240px;
background-color: forestgreen;
transform: rotate(45deg);
margin-left: 240px;
margin-top: 529px;
animation-name: mont2;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#mont3 {
position: absolute;
left: 0px;
top: 0px;
height: 0px;
width: 0px;
border-right: 140px solid transparent;
border-bottom: 360px solid forestgreen;
border-left: 160px solid transparent;
margin-left: 400px;
margin-top: 480px;
animation-name: mont3;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#soleil {
position: absolute;
left: 0px;
top: 0px;
width: 125px;
height: 125px;
border-radius: 50%;
background: radial-gradient(orange, yellow);
margin-left: 220px;
margin-top: 480px;
animation-name: soleil;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#helico {
position: absolute;
margin-left: -140px;
margin-top: 480px;
background-image: url(helico.gif);
width: 140px;
height: 50px;
animation-name: helico;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes mont1 {
from { margin-top: 633px; }
15% { margin-top: 350px; }
to { margin-top: 350px; }
}
@keyframes mont3 {
from { margin-top: 480px; }
5% { margin-top: 480px; }
15% { margin-top: 145px; }
to { margin-top: 145px; }
}
@keyframes mont2 {
from { margin-top: 529px; }
10% { margin-top: 529px; }
15% { margin-top: 280px; }
to { margin-top: 280px; }
}
@keyframes soleil {
from { margin-top: 480px; }
10% { margin-top: 480px; }
25% { margin-top: 100px; }
to { margin-top: 100px; }
}
@keyframes ciel {
from { background-color: #191970; }
10% { background-color: #191970; }
25% { background-color: #1e90ff; }
to { background-color: #1e90ff; }
}
@keyframes helico {
from { margin-top: 180px; margin-left: -140px; }
5% { margin-top: 180px; margin-left: -140px; }
70% { margin-top: 180px; margin-left: 640px; }
to { margin-top: 180px; margin-left: 640px; }
}
</style>
<div class="ciel">
<div id="soleil"></div>
<div id="mont3"></div>
<div id="helico"></div>
<div id="mont1"></div>
<div id="mont2"></div>
</div>
ciel
soleil
mont3
helico
mont1
mont2
L'ordre dans lequel on pose les éléments est primordial. L'hélico qui passe derrière le soleil n'aurait pas forcément eu le même impact. Ça aurait été dommage car comme l'hélico est ouvert, on voit le soleil à travers lorsqu'il passe devant.
Cet ordre est définit dans le code HTML qui ne sert qu'à ça. Les objets s'empilent les uns sur les autres au fur et à mesure qu'ils sont déclarés. Le premier déclaré est le plus éloigné du spectateur. Comme on peut le constater, l'hélico passe devant le ciel et le soleil ainsi que devant le pic de droite et il passe derrière les deux pics de gauche.
Maintenant qu'on sait comment placer tous nos éléments, on va les dessiner. C'est là que le CSS entre en jeu. Le code est un peu long car il y a six objets à décrire mais il n'est pas bien compliqué et surtout il est répétitif.
- Le ciel On fixe sa taille (c'était la taille standard des écrans quand j'ai débuté en informatique) et sa couleur. On pose overflow à hidden pour ne pas voir tout ce qui déborde du cadre. On décrit ensuite l'animation qui sera la même pour tous les objets.
- Le triangle de gauche est un grand rectangle étiré et pivoté avec la propriété transform. Cette propriété est un peu comme chez Casto, y'a tout c'qui faut pour triturer les blocs. Vous verrez ça sur la page <transform-function>. Il est ensuite positionné en dehors du du fond.
- Le triangle du milieu n'est qu'un carré qui pivote de 45 degrés.
- Le triangle de droite est un peu plus compliqué à dessiner car c'est un triangle irrégulier. C'est un bloc <div> nul avec des bordures conséquentes. Pour tout savoir ou presque sur les triangles, allez voir la page Les triangles.
- Le soleil est un carré arrondi à l'aide de la propriété border-radius.
- L'hélico est une photo au format gif transparent (89a) utilisée comme image de fond d'une balise <div> au dimensions de l'image.
| Durée | mont1 | mont3 | mont2 | soleil | ciel | helico |
| 0% ~ 5% | ||||||
| 5% ~ 10% | ||||||
| 10% ~ 15% | ||||||
| 15% ~ 20% | ||||||
| 20% ~ 25% | ||||||
| 25% ~ 30% | ||||||
| 30% ~ 35% | ||||||
| 35% ~ 40% | ||||||
| 40% ~ 45% | ||||||
| 45% ~ 50% | ||||||
| 50% ~ 55% | ||||||
| 55% ~ 60% | ||||||
| 60% ~ 65% | ||||||
| 65% ~ 70% | ||||||
| 70% ~ 100% | Rrrr...! | |||||
Ce système a le mérite de nous permettre de visualiser la cohérence de ce que nous écrivons. Si par exemple le ciel avait continué à s'éclaircir après ue le soleil soit arrivé à destination, il aurait fallu corriger la règle @keyframes ciel. Sur la page Mongolfière, tout ceci a moins d'importance car il n'y a qu'un objet qui bouge. Vous trouverez un autre exemple d'animation sur laquelle la synchronisation des objets est essentielle sur la page de la règle @keyframes.