oujood.com

Définir la direction d'une animation avec la propriété css animation-direction

Dans ce chapitre nous allons voir comment fonctionne la propriété css animation-direction et comment l'utiliser avec des exemples.
La propriété css animation-direction définit si une animation doit être jouée en avant, en arrière ou en cycles alternés.

chercher |

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

La propriété animation-direction en CSS est utilisée pour définir la direction de l'animation. La direction de l'animation peut être en avant, en arrière ou en cycles alternés.

La Syntaxe CSS
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
Valeurs par défaut normal
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.animationDirection="reverse"

Prise en charge de la propriété css animation-direction par 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
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-direction 
	</title>
	<style>
		body {
			text-align:center;
		}
		h1 {
			color:green;
			animation-name: textAnimation;
			animation-duration: 2s;
			animation-iteration-count: 4;
		}
		h2 {
			width: 100%;
			animation-name: textAnimation;
			animation-delay: 2s;
			animation-duration: 2s;
		}
		h3 {
			width: 100%;
			animation-name: textAnimation;
			animation-delay: 3s;
			animation-duration: 2s;
		}
		#une {
			animation-direction: alternate;
		}
		#deux{animation-direction: reverse;}
		@keyframes textAnimation {
			from {
				margin-left: 60%;
			}
			to {
				margin-right: 0%;
			}
		}
	</style>
</head>
<body>
	<h1 id="une">Lire avec oujoood.com</h1>
	<h2 id="deux">la propriété animation-direction </h2>
	<h3 id="trois">la direction de l'animation de ce text est par defaut normal.</h3>
</body>
</html>

Exemple Modifier la direction de l'animation avec javascript       Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
	<title>
		CSS | La propriété animation-direction 
	</title>
	<style> 
div {
  width: 100px;
  height: 100px;
  background: darkblue;
  position: relative;
  animation: monAnimation 5s infinite;
}

@keyframes monAnimation {
  from {left: 0px;}
  to {left: 200px;}
}
</style>
</head>
<body>

<h1>Modifier l'animation-direction avec JavaScript</h1>

<p>Click sur le bouton "CHANGER" pour inverser la direction de l'animation animation.</p>
<button onclick="maFonction()">CHANGER</button><br>
<div id="monDIV"></div>

<script>
function maFonction() {
  document.getElementById("monDIV").style.animationDirection = "reverse";
}
</script>
</body>
</html>

Valeurs de la propriété css animation-direction

- normal : Cette propriété d'animation permet de jouer l'animation vers l'avant. Il s'agit de la valeur par défaut.
- reverse : Cette propriété d'animation joue l'animation dans le sens inverse.
- alternate : Cette propriété d'animation permet de jouer l'animation d'abord en avant, puis en arrière.
- alternate-reverse : Cette propriété d'animation joue d'abord l'animation en arrière, puis en avant.
- initial : Cette propriété est utilisée pour définir 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