Modifie les informations de localisation
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.
Club Affiliation Facile -PUB: 7JOURS -Webmarketing
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.
SITES RÉMUNÉRATEURS
Ces sites web "pépites" vous payent entre 500 et 1000 euros par mois pour effectuer de petites tâches simples !
