<div class="parent">
	<div class="sled">
		<div class="child">
			πŸ‘ΆπŸ»
		</div>
	</div>
</div>
.parent {
	position: relative;
	width: 25px;
	height: 150px;
	background: cornflowerblue;
}

.sled {
	position: absolute;
	inset: 0;
	animation: slide 3s ease-in-out alternate infinite;
	background: lightcoral;
}

.child {
	background: lemonchiffon;
}

@keyframes slide {
	from {
		transform: translateY(0%);
	}

	to {
		transform: translateY(100%);
	}
}

/* Not relevant to the example */
html,
body {
	height: 100%;
}
body {
	margin: 0;
	display: grid;
	place-items: center;
	font-size: 1.25rem;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.