Créer un effet de fondu progressif à vos éléments html

Comment réer un effet de fondu progressif à vos éléments html

Voici un bout de code à appliquer à n’importe quel élément html de vos pages web, pour un effet fondu progressif en css.

.fade-in {
	-webkit-animation-name: fadeInOpacity;
	        animation-name: fadeInOpacity;
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in;
	        animation-timing-function: ease-in;
	-webkit-animation-duration: 2s;
	        animation-duration: 2s;
}

@-webkit-keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

Voici un rendu visuel, cliquez sur « rerurn » pour observer l’effet.

See the Pen
Simple css FadeIn effect by yuyazz (@yuyazz)
on CodePen.

Mis à jour le Par Copier coller | Dans CSS