css_var_animation_typing.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Webpage Test</title>
	<link rel="stylesheet" href="css/css_var_animation_typing.css">
</head>
<body>
	<div class="block">
		<p class="typing">CSS Variables are awesome</p>
	</div>
</body>
<script>
	for (let element of document.querySelectorAll(".typing")) {
		let length = element.textContent.length;
		element.style.setProperty("--length", length);
	}
</script>
</html>