Réaliser un dégradé en animation css3 [Résolu/Fermé]

Signaler
-
 TheBleedz -
Bonjour,
J'aimerai savoir si il est possible de créer un dégradé animé en css3 ?
Je m'explique :
Dans mon "body" j'aimerais ajouter cette animation en background afin de créer un effet qui pars du rouge vers le violet vers le bleu etc... et qui reviens vers le rouge.

Merci d'avance et bonne soirée à vous.

5 réponses


Salut, il faut utiliser les transition et/ou les animations. Le problème est que cela ne fonctionnera que sur les navigateurs récents.

exemple avec juste des transitions :

<style type="text/css">
			html, body {
				height: 100%;
				width: 100%;
			}
			body {
				background: white -webkit-linear-gradient(left, #FBA1A1 0%,#EAF172 25%, #99D6FB 50%, #FB99F0 75%, #99FBBF 100%);
				background: white -moz-linear-gradient(left, #FBA1A1 0%, #EAF172 25%, #99D6FB 50%, #FB99F0 75%, #99FBBF 100%);
				background: white -ms-linear-gradient(left, #FBA1A1 0%, #EAF172 25%, #99D6FB 50%, #FB99F0 75%, #99FBBF 100%);
				background: white -o-linear-gradient(left, #FBA1A1 0%, #EAF172 25%, #99D6FB 50%, #FB99F0 75%, #99FBBF 100%);
				background: white linear-gradient(left, #FBA1A1 0%, #EAF172 25%, #99D6FB 50%, #FB99F0 75%, #99FBBF 100%);
				background-size: 200% 100%;
				-webkit-transition: all 2s linear;
				-moz-transition: all 2s linear;
				-ms-transition: all 2s linear;
				-o-transition: all 2s linear;
				transition: all 2s linear;
			}
			body:hover {
				background-position: 100%;
			}

		</style>
	</head>
	<body>

	</body>

Ah oui les navigateurs... J'avais pas pensé à ce problème.
Avec des images c'est la même chose je suis pose :)

Merci beaucoup.
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
636
salut

sans css3 transition ou keyframes

ce que u veux faire est possible mais avec jquery UI et la fonction switchclass et /ou la fonction jquery animate()

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

Salut, avec les images cela ne pose pas de souci. Sinon fais une recherche avec un plugin jquery.
Merci pour vos réponses rapide et précise :) J'ai résolu mon problème !!!
Merci et bonne soirée à vous