<section class="linear">
	<figure>
		<div class="timeline">
			<svg class="diagram" viewbox="0 0 500 340" xmlns="http://www.w3.org/2000/svg"
				 xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
				<line x1="0" x2="500" y1="340" y2="0" fill="none" stroke-width="10" stroke="#7BDAFF"></line>
			</svg>
		</div>
		<figcaption>Linear</figcaption>
	</figure>
	<div class="track">
		<span class="truck">🚗</span>
	</div>
</section>

<section class="ease-in">
	<figure>
		<div class="timeline">
			<svg class="diagram" viewbox="0 0 500 340" xmlns="http://www.w3.org/2000/svg"
				 xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
				<path d="M0,340 Q 340 340 500 0" fill="none" stroke-width="10" stroke="#7BDAFF"></path>
			</svg>
		</div>
		<figcaption>Ease In</figcaption>
	</figure>
	<div class="track">
		<span class="truck">🛥️</span>
	</div>
</section>

<section class="ease-out">
	<figure>
		<div class="timeline">
			<svg class="diagram" viewbox="0 0 500 340" xmlns="http://www.w3.org/2000/svg"
				 xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
				<path d="M0,340 Q 80 80 500 0" fill="none" stroke-width="10" stroke="#7BDAFF"></path>
			</svg>
		</div>
		<figcaption>Ease Out</figcaption>
	</figure>
	<div class="track">
		<span class="truck">🚒</span>
	</div>
</section>

<section class="ease-in-out">
	<figure>
		<div class="timeline">
			<svg class="diagram" viewbox="0 0 500 340" xmlns="http://www.w3.org/2000/svg"
				 xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
				<path d="M0,340 Q 150 340 250 170 Q 340 0 500 0" fill="none" stroke-width="10" stroke="#7BDAFF"></path>
			</svg>
		</div>
		<figcaption>Ease In Out</figcaption>
	</figure>
	<div class="track">
		<span class="truck">🏃</span>
	</div>
</section>

* {
	font-family: sans-serif;
}

section {
	display: flex;
	margin-bottom: 3em;
}

figure {
	display: inline-flex;
	flex-direction: column;
	width: 300px;
}

figcaption {
	display: inline-block;
	height: 1em;
	padding-top: 0.5em;
}

.diagram {
	position: relative;
	border-left: 5px solid #2B6B93;
	border-bottom: 5px solid #2B6B93;
	height: 200px;
}

.timeline {
	position: relative;
	width: 100%;
	height: calc(100% - 2em);
}

.timeline::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #2B6B93;
	opacity: 0.2;
	transform-origin: left;
	animation: scale 4s infinite; 
}

.track {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	max-width: 400px;
	border-bottom: 5px solid gray;
	margin-bottom: 2.9em;
}

.truck {
	width: 100%;
	height: 1.3em;
	font-size: 4em;
	transform: scale(-1,1) translateX(0);
	animation: moveTruck 4s infinite; 
}

.linear .timeline::before,
.linear .truck {
	animation-timing-function: linear;
}

.ease-in .timeline::before,
.ease-in .truck {
	animation-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530);
}

.ease-out .timeline::before,
.ease-out .truck {
	animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

.ease-in-out .timeline::before,
.ease-in-out .truck {
	animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955)
}

@keyframes scale {
	0% {
		transform: scaleX(0);
	}
	20% {
		transform: scaleX(0);
	}
	80% {
		transform: scaleX(1);
	}
	100% {
		transform: scaleX(1);
	}
}

@keyframes moveTruck {
	0% {
		transform: scale(-1,1) translateX(calc(100% - 1em));
	}
	20% {
		transform: scale(-1,1) translateX(calc(100% - 1em));
	}
	80% {
		transform: scale(-1,1) translateX(0);
	}
	100% {
		transform: scale(-1,1) translateX(0);
	}
}

@media (max-width: 700px) {
	section {
		flex-direction: column;
		align-items: center;
	}
	
	.timeline {
		order: 2;
	}
	
	.track {
		width: 300px;
	}
}