CSS animation not starting-CodePudding

I want to make a loading bar with a divgoing from the left to the right.

Actually the div is doing nothing.

No error messages in console.

I've tried to put the keyframes declaration at the begining of the file but it's still not working.

Here is my code:

@keyframes loading {
  from {
    margin-left: 0px;
  }
  
  to {
    margin-left: 90px;
  }
}

#loading-bar {
  width: 100px;
  height: 5px;
  background-color: lightgray;
}

#loading-bar > div {
  width: 10px;
  height: 5px;
  background-color: cornflowerblue;
  animation: 3s linear 0 loading;
}

<div id="loading-bar">
 <div></div>
</div>

CodePudding user response：

Is this the result you want?

@keyframes loading {
  to {
    width: 90%;
  }
}

#loading-bar {
  width: 100px;
  height: 5px;
  background-color: lightgray;
}

#loading-bar > div {
  width: 10%;
  height: 5px;
  background-color: cornflowerblue;
  animation: 3s forwards loading;
}

<div id="loading-bar">
 <div></div>
</div>

CodePudding user response：

Try the below changes in your code. Replace margin-left with width in animation and animation: 3s linear 0 loading with animation: loading 3s normal forwards

Working code:

@keyframes loading {
  from {
    width: 0px;
  }
  to {
    width: 90px;
  }
}

#loading-bar {
  width: 100px;
  height: 5px;
  background-color: lightgray;
}

#loading-bar>div {
  width: 10px;
  height: 5px;
  background-color: cornflowerblue;
  animation: loading 3s normal forwards;
}

<div id="loading-bar">
  <div></div>
</div>