Animating with Property Values

This CSS example demonstrates how to animate properties using the property rule.

positioning.css

@property --pTopColor {
	syntax: "<color>";
	initial-value: red;
	inherits: false;
}

@property --pBottomColor {
	syntax: "<color>";
	initial-value: black;
	inherits: false;
}

@keyframes kFrames {
	0%, 100% {
		--pTopColor: red;
		--pBottomColor: black;
	}
	50% {
		--pTopColor: black;
		--pBottomColor: red;
	}
}

#idDiv {
	position: relative;
	width: 400px;
	height: 200px;
	background: radial-gradient(var(--pTopColor), var(--pBottomColor));
	animation: kFrames 5s linear infinite;
}

#idHeader {
	font: normal normal normal normal 80px/100px sans-serif;
	color: darkred;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -100%);
}

TypesOfPositioning.html

<!DOCTYPE html>
<html>
	<head>
		<link rel="icon" href="data:,">
		<title>XoaX.net's CSS</title>
		<link rel="stylesheet" href="AnimatedProperty.css">
	</head>
	<body>
		<div id="idDiv">
			<h1 id="idHeader">XoaX.net</h1>
		</div>
	</body>
</html>

Output

XoaX.net's CSS