oujood.com

la propriété css animation-name

La propriété animation-name est utilisée pour désigner le nom des @keyframes qui définissent l'animation.

chercher |

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éfautnone
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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion43
4 -webkit-
1016
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.