selector{ --change-duration: 0.75s; height: 320px; } selector .elementor-inner-section{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); } selector .elementor-container{ opacity: 0; transform: translateY(-100%) scale(0.5); } .anim selector .elementor-container{ transition: all var(--change-duration) ease-in-out; } selector .after .elementor-container{ opacity: 0.4; transform: translateY(100%) scale(0.7); } .anim selector .after .elementor-container{ animation: enter var(--change-duration) ease-in-out; } selector .before .elementor-container{ opacity: 0.4; transform: translateY(-100%) scale(0.7); } selector .current .elementor-container{ opacity: 1; transform: none; } selector .before, selector .after{ z-index: 1; } selector .current{ z-index: 2; } @keyframes enter { 0%{ opacity: 0; transform: translateY(100%) scale(0.5); } 100%{ opacity: 0.4; transform: translateY(100%) scale(0.7); } }