Réaliser un dégradé en animation css3

Résolu/Fermé
TheBleedz - 15 mai 2014 à 19:52
 TheBleedz - 16 mai 2014 à 17:14
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.

A voir également:

5 réponses

Utilisateur anonyme
15 mai 2014 à 22:55
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>

0
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.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 16/05/2014 à 15:53
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.
0
Utilisateur anonyme
16 mai 2014 à 15:56
Salut, avec les images cela ne pose pas de souci. Sinon fais une recherche avec un plugin jquery.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Merci pour vos réponses rapide et précise :) J'ai résolu mon problème !!!
Merci et bonne soirée à vous
0