Implementare un effetto di sliding laterale con i CSS

Implementare un effetto di sliding laterale con i CSS

È possibile implementare un effetto di sliding laterale con i CSS.

La soluzione è la seguente:


.element {
    opacity: 0;
    transform: translateX(150%);
}

.slideLeft {
	   animation-name: slideLeft;
     animation-duration: 1s;	
     animation-timing-function: ease-in-out;
}

@keyframes slideLeft {
	0% {
		transform: translateX(150%);
    opacity: 0;
	}
	50%{
		transform: translateX(-8%);
    opacity: 0.5;
	}
	65%{
		transform: translateX(4%);
    opacity: 0.65;
	}
	80%{
		transform: translateX(-4%);
    opacity: 0.8;
	}
	95%{
		transform: translateX(2%);
    opacity: 0.95;
	}			
	100% {
		transform: translateX(0%);
    opacity: 1;
	}
}

Torna su