.container { background-image: url('landscape1.png'); background-size: cover; background-position: center; width: 100%; max-width: 800px; height: 800px; /* Increased height for better vertical travel */ position: relative; overflow: hidden; border: 3px solid #222; } .moving-object { width: 160px; /* Double the original size */ position: absolute; /* Center it horizontally */ left: 50%; transform: translateX(-50%); /* Start above the top edge */ top: -20%; /* Slower 12-second vertical descent */ animation: verticalLand 12s ease-out forwards; } @keyframes verticalLand { 0% { top: -20%; transform: translateX(-50%) scale(1); } 50% { top: 30%; /* Slight sway side-to-side as it falls */ transform: translateX(-40%) scale(1.5); } 100% { top: 75%; /* Final landing position near the bottom */ /* Zooms in to 2x the starting width (320px) */ transform: translateX(-50%) scale(2); filter: drop-shadow(0px 30px 15px rgba(0,0,0,0.5)); } }.container { background-image: url('landscape1.png'); background-size: cover; background-position: center; width: 100%; max-width: 800px; height: 800px; /* Increased height for better vertical travel */ position: relative; overflow: hidden; border: 3px solid #222; } .moving-object { width: 160px; /* Double the original size */ position: absolute; /* Center it horizontally */ left: 50%; transform: translateX(-50%); /* Start above the top edge */ top: -20%; /* Slower 12-second vertical descent */ animation: verticalLand 12s ease-out forwards; } @keyframes verticalLand { 0% { top: -20%; transform: translateX(-50%) scale(1); } 50% { top: 30%; /* Slight sway side-to-side as it falls */ transform: translateX(-40%) scale(1.5); } 100% { top: 75%; /* Final landing position near the bottom */ /* Zooms in to 2x the starting width (320px) */ transform: translateX(-50%) scale(2); filter: drop-shadow(0px 30px 15px rgba(0,0,0,0.5)); } }