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.

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

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'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe