<label>A five second timer, made in CSS &mdash; <input type="checkbox"/> check or re-check the box to see </label>

<div class=timer></div>

@property --n {
	syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}
@keyframes count {
	from { --n: 5; }
	to { --n: 0; }
}
label:has(:checked) + .timer::after{
	animation: 5s linear count, .3s linear 5s shrink;
	animation-fill-mode: forwards;
	counter-reset: n calc(0 + var(--n));
	content: counter(n);
	transform: scale(1);
	transition: transform .3s;
}

/* following rules are for styling the demo 
***********************************************/

@keyframes shrink {
	to { transform: scale(0); }
}
label{
	font-size: 18pt;
	width: 400px;
}
input{
	width: 1.5lh;
	aspect-ratio: 1 / 1;
	border: 1.5px solid rgb(17 48 244);
	border-radius: 2px;
	appearance: none;
	vertical-align: middle;
}
:checked{
	background: rgb(152 191 240);
}
.timer{
	place-self: center;
}
.timer::after{
	height: 1lh;
	line-height: 200px;
	font-size: 92pt;
	font-weight: bold;
	background: linear-gradient(45deg, rgb(17 48 244) 50%, rgb(114 244 252));
	background-clip: text;
	color: transparent;
	display: block;
	content: '';
	transform: scale(0);
	font-family: Orbitron;
}

body {
	display: grid;
	height: 100vh;
	row-gap: 40px;
	place-content: center;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	font-family: 'crimson text';	
	margin: 0;
}

/* fallback intimation */
onload=()=>{
	if(!CSS.registerProperty) {
		document.querySelector('body').innerHTML = '<br><span style="font-size:14pt;width:300px">CSS <span style="font-family:courier">@property</span> is not supported in this browser, so this example is not shown. Try Chrome :) </span>'; 
	} 
}