This is the simplest example I managed to craft:
hr { width: 10%; transition:width 1s; }
hr:hover { width: 100%; }
In my example, the animation starts by hover. If you want to do something on the event when your page is loaded, you will need to use JavaScript. For example:
<html>
<head>
<title>HR transition demo</title>
<style>
hr { width: 10%; transition:width 1s; }
</style>
</head>
<body>
<hr id="hr"/>
<script>
document.body.onload = function() {
var hr = document.getElementById("hr");
hr.style.width = "100%";
}
</script>
</body>
</html>
—SA