Il existe trois façons d'animer des éléments html: les transitions, les transformations et les animations.
Les transformation permettent de modifier l'état d'un bloc: translation, déformation et rotation.
Il n'existe qu'une seule propriété: transform, qui peut recevoir plusieurs mots-clés pour orienter la transformation.
Le pilote @keyframes permet de piloter l'animation, elle précise les différents états d'un bloc au cours de l'animation.
On peut utiliser les mots from (correspond à 0%) et to (correspond à 100%) ou alors un pourcentage pour caractériser l'évolution du bloc dans l'animation.
Dans l'exemple suivant:
- les caractéristiques de l'animation sont spécifiées au sein du bloc qui subit l'animation
- Le nom de l'animation est mymove, elle dure 5s et est répétée indéfiniment
- Le pilote @keyframes doit savoir quelle animation piloter, c'est pourquoi on spécifie le nom de l'animation à piloter
Déroulement de l'animation:
- à 0%,au commencement de l'animation, le bloc est positionné en haut de la fenêtre
- après 25% de la durée de l'animation (5s) le bloc doit se positionné à 200px du bord supérieur
- après 75% de la durée de l'animation (5s) le bloc doit se positionné à 100px du bord supérieur
- après 100% de la durée de l'animation (5s) le bloc doit se positionné à 0px du bord supérieur, la position de départ.
Démo
<style>
div {
width: 100px;
height: 100px;
background: red;
position :relative;
animation-name: mymove;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 100px}
100% {top: 0px;}
}
</style>
</head>
<body>
<div></div>
</body>
Toutes les propriétés css peuvent être utilisées dans les animations, l'exemple suivant montre comment agir sur plusieurs propriétés.
Pour cet exemple on a utilisé from et to pour piloter l'animation
Démo
<style>
div {
width: 100px;
height: 100px;
background: red;
position :relative;
animation-name: mymove;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes mymove {
0% {top: 0px; width: 100px; }
100% {top: 200px;width: 300px;border-radius:15px}
}
</style>
</head>
<body>
<div></div>
</body>
Toutes les propriétés css peuvent être utilisées dans les animations, l'exemple suivant montre comment agir sur plusieurs propriétés.
| Propriété |
Valeurs |
| animation-name | au choix du programmeur |
animation-duration | Durée de l'animation
en secondes |
animation-timing-function | linear | ease | ease-in | ease-out | ease-in-out |
animation-delay | Délais avant lancement de l'animation
en secondes |
animation-iteration-count | Nombre de fois que l'animation doit être effectuée
un nombre entier |
animation-direction | Spécifie le sens dans lequel l'animation s'effectue
normal | reverse | alternate | alternate-reverse |
animation-fill-mode | none | forwards | backwards | both |
animation-play-state | L'animation se déroule ou fait une pause
paused | running
running est la valeur par défaut |
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
