È 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;
}
}