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.
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
