<animation>
Permet de définir une animation qui est ensuite utilisable avec l'attribut <css use-animation='...'>
Exemple
<animation name='test' duration='1s' iteration-count='1' timing-function='ease-out'>
<param time='0%' transform='scale(0) translateY(-100%)' opacity='0' />
<param time='100%' transform='scale(1) translateY(0)' opacity='1' />
</animation>
<param time='0%' transform='scale(0) translateY(-100%)' opacity='0' />
<param time='100%' transform='scale(1) translateY(0)' opacity='1' />
</animation>
Attributs
| name | Le nom de l'animation |
| duration | La durée de l'animation ex: 1s |
| iteration-count | Le nombre de répétition (1 pour une seule) |
| timing-function | La fonction d'adoucissemennt (easing) ex: ease-out |
Key Frames
Une série de tags <param> permet de définir la séquence. Le paramètre time en (%) défini quand l'état est souhaité. 0% = début de l'animation, 100% la fin, et tout autre valeurs au millieu
Les autres paramètres sont appliqué au css, typiquement transform et opacity et les transitions sont gérées entre les key frames
Editer