La propriété animation-name est utilisée pour désigner le nom des @keyframes qui définissent l'animation.
animation-name: keyframename|none|initial|inherit;
Valeurs par défaut | none |
---|---|
Inherited: | non |
Animable : | non En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.animationName="monAnimation" |
Explorateur | ![]() | ![]() | ![]() | ![]() | ![]() | |
---|---|---|---|---|---|---|
Verssion | 43 4 -webkit- | 10 | 16 5 -moz- | 9 4 -webkit- | 30 15 -webkit- 12 -o- |
Exemple Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title> CSS : La propriété animation-name </title> <style> body { text-align:center; width:70%; } h1 { color:green; } div { width: 50px; height: 50px; background: green; border-radius:50%; position: relative; -webkit-animation: monAnimation 5s infinite; -webkit-animation-delay: 2s; animation: monAnimation 5s infinite; animation-delay: 2s; } @-webkit-keyframes monAnimation { from { left: 0%; } to { left: 80%; } } @keyframes monAnimation { from { left: 0px; } to { left: 80%; } } </style> </head> <body> <h1> OUJOOD est un portail informatique pour développeurs</h1> <h2>La propriété animation-name </h2> <div></div> </body> </html>
Exemple Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title> CSS : La propriété animation-name </title> <style> div { width: 100px; height: 100px; background: red; position: relative; animation: monAnimation 2s infinite; } /* @keyframes utilisé au démarage de l'exemple sans le click sur le bouton "CHANGER"*/ @keyframes monAnimation { from {left: 0px;} to {left: 200px;} } /*@keyframes sera utilisé après le click sur le bouton "CHANGER"*/ @keyframes monNEWanim { from {width: 0px;} to {width: 500px; background: blue;} } </style> </head> <body> <h1>Changer animation-name avec JavaScript</h1> <p>Cliquez le bouton "CHANGER" pour modifier les @keyframes à utiliser dans l'animation :</p> <button onclick="maFonction()"> CHANGER </button> <div id="monDIV"></div> <script> function maFonction() { document.getElementById("monDIV").style.animationName = "monNEWanim"; } </script> </body> </html>
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENT