<h1>UK vs US Traffic Lights</h1>
<p class="instruction"><span class="stop">Stop</span><span class="ready">Get ready</span><span class="go">Go</span><span class="prepare">Prepare to stop</span></>
	<div class="grid">
		<figure class="traffic-light uk">
			<div class="light red"></div>
			<div class="light amber"></div>
			<div class="light green"></div>
			<figcaption>UK</figcaption>
		</figure>
		<figure class="traffic-light us">
			<div class="light red"></div>
			<div class="light amber"></div>
			<div class="light green"></div>
			<figcaption>US</figcaption>
		</figure>
	</div>
html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	min-height: 100vh;
	min-width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	font-family: "Bangers", cursive;
	letter-spacing: 2px;
}

h1 {
	text-align: center;
	font-size: 1.8rem;

	@media screen and (min-width: 40em) {
		font-size: 2.5rem;
	}
}

.grid {
	display: grid;
	justify-content: center;
	gap: 1rem;
	grid-template: 1fr 1fr / 1fr;
	max-height: 100vh;

	@media screen and (min-width: 40em) {
		grid-template: 1fr / 1fr 1fr;
	}
}

/* =========== */

@function light($colour) {
	@return radial-gradient(circle, $colour 50%, mix($colour, #444, 0.4));
}

$red: #ef3b25;
$amber: #f2cb00;
$green: #00ac4e;

$uk-bg: #2c2c2c;
$us-bg: #d8851a;
$light-red: light($red);
$light-amber: light($amber);
$light-green: light($green);
$sequence-time: 10s;

.traffic-light {
	height: 60vmin;
	width: 30vmin;
	border-radius: 4vmin;
	display: flex;
	flex-direction: column;
	gap: 1vmin;
	align-items: center;
	justify-content: space-evenly;
	position: relative;
	box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);

	figcaption {
		position: absolute;
		bottom: 100%;
		padding: 0.5rem 1rem;
		font-weight: 700;
		font-size: 1.5rem;
	}

	&.uk {
		background: $uk-bg;

		.light {
			border: 1vmin solid darken($uk-bg, 15%);
			border-bottom-color: $uk-bg;

			&.red {
				animation: red $sequence-time steps(1) infinite;
			}

			&.amber {
				animation: amber $sequence-time steps(1) infinite;
			}

			&.green {
				animation: green $sequence-time steps(1) infinite;
			}
		}
	}

	&.us {
		background: $us-bg;

		.light {
			border: 1vmin solid darken($us-bg, 15%);
			border-bottom-color: $us-bg;

			&.red {
				animation: red $sequence-time steps(1) infinite;
			}

			&.amber {
				animation: amber-us $sequence-time steps(1) infinite;
			}

			&.green {
				animation: green $sequence-time steps(1) infinite;
			}
		}
	}
}

.light {
	height: 15vmin;
	width: 15vmin;
	border-radius: 50%;
	position: relative;

	&.red {
		background: $light-red;
	}

	&.amber {
		background: $light-amber;
	}

	&.green {
		background: $light-green;
	}
}

.instruction {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;

	> * {
		position: absolute;
		white-space: nowrap;
		text-align: center;
	}

	.stop {
		animation: stop $sequence-time steps(1) infinite;
	}

	.ready {
		animation: ready $sequence-time steps(1) infinite;
	}

	.go {
		animation: go $sequence-time steps(1) infinite;
	}

	.prepare {
		animation: prepare $sequence-time steps(1) infinite;
	}
}

@keyframes red {
	0%,
	90% {
		background: $light-red;
	}
	30% {
		background: fade_out($red, 0.8);
	}
}

@keyframes amber {
	0%,
	30%,
	90% {
		background: fade_out($amber, 0.8);
	}
	15%,
	75% {
		background: $light-amber;
	}
}

@keyframes amber-us {
	0%,
	90% {
		background: fade_out($amber, 0.8);
	}
	75% {
		background: $light-amber;
	}
}

@keyframes green {
	0%,
	75% {
		background: fade_out($green, 0.8);
	}
	30% {
		background: $light-green;
	}
}

@keyframes stop {
	0%,
	90% {
		visibility: visible;
		opacity: 1;
	}
	15% {
		visibility: hidden;
		opacity: 0;
	}
}

@keyframes ready {
	0%,
	30% {
		visibility: hidden;
		opacity: 0;
	}
	15% {
		visibility: visible;
		opacity: 1;
	}
}

@keyframes go {
	0%,
	75% {
		visibility: hidden;
		opacity: 0;
	}
	30% {
		visibility: visible;
		opacity: 1;
	}
}

@keyframes prepare {
	0%,
	90% {
		visibility: hidden;
		opacity: 0;
	}
	75% {
		visibility: visible;
		opacity: 1;
	}
}
View Compiled
// https://jackdomleo.dev

External CSS

  1. https://fonts.googleapis.com/css2?family=Bangers&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.