commande KEYFRAMES
Rôle
La commande @keyframes permet de spécifier les étapes d’une animation.
Vous pouvez découper l’animation en deux étapes : from to.
@keyframes mvt { from {transform: rotate(-45deg)} to {transform: rotate(45deg)} }
ou en plusieurs étapes : entre 0 et 100%.
@keyframes mvt { 0% {transform: rotate(-45deg)} 50% {transform: rotate(0deg)} 100% {transform: rotate(45deg)} }
Vous pouvez modifier plusieurs attributs pour chaque étape :
@keyframes mvt { 0% {transform: rotate(-45deg); color: red;} 50% {transform: rotate(0deg); color: orange;} 100% {transform: rotate(45deg); color: green;} }
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
body{ padding: 30px; background-color: rgb(230,230,230); } img{ border-radius: 50%; width: 200px; position: relative; display: block; margin: 0 auto; border: thin solid orange; animation: cos 3s infinite linear alternate ; } @keyframes cos { 0% {transform: rotate(-45deg); left: -50px} 100% {transform: rotate(45deg); left: 50px} }
– Le code HTML
<img src="//lorempixel.com/output/people-q-c-200-200-6.jpg" alt="">
Résultat
Dans cet exemple l’animation concerne un mouvement de rotation (de -45° à 45°) et un réajustement de position (-50px à 50px) qui dure 3 secondes. Cette animation sera alternée infiniment.
Compatibilité
L’attribut animation est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 10.
Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -webkit-(Chrome, Safari, Android…), -moz- (Mozilla), -o- (Opéra).