OUJOOD.COM
Définition et utilisation da la propriété css animation-name
La propriété animation-name spécifie un nom pour l'animation @keyframes.La Syntaxe CSS
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" |
Prise en charge de la propriété CSS animation-name dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| 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 : Changer animation-name avec JavaScript
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>
Valeurs de la propriété CSS animation-name
- keyframename : Cette propriété est utilisée pour spécifier le nom de l'image clé qui doit être liée au sélecteur.- none : C'est la valeur par défaut. Elle est utilisée pour spécifier qu'il n'y aura pas d'animation.
- initial : Cette propriété est utilisée pour définir cette propriété à sa valeur par défaut.
- inherit : Cette propriété est utilisée pour hériter la propriété de son parent.