oujood.com

Définir le temps que dure une animation avec la propriété css animation-duration

Dans ce chapitre nous allons voir comment fonctionne la propriété css animation-duration et comment l'utiliser avec des exemples.
La propriété animation-duration définit le temps qu'une animation doit prendre pour accomplir un cycle.

chercher |

Définition et utilisation da la propriété css animation-duration

La propriété animation-duration en CSS est utilisée pour définir le temps que doit prendre une animation pour terminer un cycle. En d'autres termes, elle est utilisée pour spécifier la durée pendant laquelle l'animation sera présentée.

La Syntaxe CSS de la propriété css animation-duration
animation-duration: time|initial|inherit;
Valeurs par défaut0
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.animationDuration="3s"

Prise en charge de la propriété css animation-duration 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- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion43
3 -webkit-
1016
5 -moz-
9
4 -webkit-
30
15 -webkit-
12 -o-

Exemple : Programme HTML pour présenter la propriété animation-duration en CSS       Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
	<title>
		CSS | La propriété animation-duration
	</title>
 <style>
        #oujood {
		border:solid 0.5px #918a8a;
            animation-name: text;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }
         
        #oujood1 {
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            color: #090;
            padding-bottom: 5px;
        }
         
        #oujood2 {
            font-size: 17px;
            font-weight: bold;
            text-align: center;
        }
         
        @keyframes text {
            from {
                margin-top: 400px;
            }
            to {
                margin-top: 0px;
            }
        }
    </style>
</head>
 
<body>
    <!-- Le div ci-dessous est animé pour une durée de 5s
       et sera jouée un nombre infini de fois. -->
    <div id="oujood">
        <div id="oujood1">
           Apprendre avec oujood.com
        </div>
        <div id="oujood2">
          OUJOOD est un portail informatique pour developeurs
        </div>
    </div>
</body>
 
</html>

Exemple : Modifier la propriété css animation-duration avec javascript     Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
	<title>
		CSS | La propriété animation-duration
	</title>
 <style>
        #oujood {
		border:solid 0.5px #918a8a;
            animation-name: text;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }
         
        #oujood1 {
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            color: #090;
            padding-bottom: 5px;
        }
         
        #oujood2 {
            font-size: 17px;
            font-weight: bold;
            text-align: center;
        }
         
        @keyframes text {
            from {
                margin-top: 400px;
            }
            to {
                margin-top: 0px;
            }
        }
		button{
		margin:10px;
		}
    </style>
</head>
 
<body>
<button onclick="maFonction()">CHANGER</button>
    <div id="oujood">
        <div id="oujood1">
           Apprendre avec oujood.com
        </div>
        <div id="oujood2">
          OUJOOD est un portail informatique pour developeurs
        </div>
    </div>
	
<div id="myDIV"></div>

<script>
function maFonction() {
  document.getElementById("oujood").style.animationDuration = "100ms";
}
</script>
</body>
 
</html>

Valeurs de la propriété

- time : Spécifie le temps qu'une animation doit prendre pour compléter un cycle. Cette durée peut être spécifiée en secondes ou en millisecondes. La valeur par défaut est 0, ce qui signifie qu'aucune animation ne se produira.
- initial : Définit la propriété d'animation à sa valeur par défaut.
- inherit : Cette propriété est utilisée pour hériter de la propriété d'animation de son élément 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'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web