CSS 动画没有开始

Question

我想制作一个div从左到右的加载栏。

实际上 div 什么也没做。

控制台中没有错误消息。

我已经尝试将关键帧声明放在文件的开头，但它仍然不起作用。

这是我的代码：

@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>

Answer 1

尝试对您的代码进行以下更改。将 animation: 3s linear 0 loading 替换为 animation: loading 3s normal forwards.

工作代码：

@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: loading 3s normal forwards;
}

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

CSS 动画没有开始

CSS animation not starting

html

css

css-animations