Implementare un effetto di entrata dal basso verso l'alto con i CSS

Implementare un effetto di entrata dal basso verso l'alto con i CSS

È possibile implementare un effetto di entrata dal basso verso l'alto con i CSS.

La soluzione è la seguente:


.expandUp {
	animation-name: expandUp;
  animation-duration: 0.7s;	
	animation-timing-function: ease;	
}

@keyframes expandUp {
	0% {
		transform: translateY(100%) scale(0.6) scaleY(0.5);
	}
	60%{
		transform: translateY(-7%) scaleY(1.12);
	}
	75%{
		transform: translateY(3%);
	}	
	100% {
		transform: translateY(0%) scale(1) scaleY(1);
	}	
}

Torna su