initiate css transitions on page load - html

Question

Im trying to understand CSS Transition - but I cant make it happen. I want to make a line go from 0 to 100% width with a small delay on pageload. I understand that CSs transition needs a trigger, and tried to read up to a jQuery or Vanilla Js solution, but get stuck.
Why is this ot working? Jsfiddle: https://jsfiddle.net/1fzzgnwy/
<div class="container">
<span class="h-line"></span>
</div>
.h-line {
position: absolute;
z-index: -1;
width: 0%;
height: 10px;
right: 0;
background-color: #000;
top: 400px;
transition: right 1.5s linear;
transition-delay: 2s;
}
.h-line.ready {
width: 100%;
background-color: #000;
}
.container {
height:100%;
width:100%;
}
$(function(){
$('.h-line').addClass('ready');
});

Answer 1

In your transition line, you are telling it to transition right, but that doesn't change in the added class. Your width does. So you need to transition the width like transition: width 1.5s linear;: JS Fiddle
And if you want it to expand left to right, remove right: 0: JS Fiddle

Answer 2

In your jsfiddle link (https://jsfiddle.net/1fzzgnwy/) there are some errors.
Here a simplified example of your code that work https://jsfiddle.net/50t3qwmL/ .
.h-line {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
background-color: #000;
transition: .3s;
transition-delay: 2s;
}
.h-line.ready {
width: 100%;
}