.stack { position: relative; display: flex; padding-right: 30px; } #features .row:nth-child(odd) .stack { padding-right: 30px; } .screenshot { position: relative; /* animation: lower 100ms forwards; */ } .screenshot:nth-child(3) { z-index: 4; left: -200%; } .screenshot:nth-child(2) { z-index: 3; left: calc(-100% + 10px); bottom: 10px; } .screenshot:nth-child(1) { z-index: 2; left: 20px; bottom: 20px; } @keyframes lower { from { animation-timing-function: ease-in-out; } to { transform: translate(-10px, 10px); } } @keyframes swap { 50% { z-index: 3; } 67% { transform: translate(35px, -125%) rotate(2.5deg); z-index: 1; } 100% { transform: translate(30px, -30px) rotate(0deg); z-index: 0; } }