Modifie les informations de localisation
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>
PROMO ! CLUB AFFILIATION FACILE : lien publicitaire affiché pendant 1 semaine sur plusieurs sites à fort trafic, partage des commissions 1TPE et SystemeIO, plus de 20000 produits.
Ces sites web "pépites" vous payent entre 500 et 1000 euros par mois pour effectuer de petites tâches simples !