Question

我想做的是当有人打开页面时，一条10px的线在10秒内变成85px，但是当我打开它时，它已经是85px的线，什么也没发生。我有什么错这是我的代码：

@keyframes linee{
0%{width:10px;}
100%{width:85px;}
animation-duration:10s;
animation-fillmode:forwards;}
.line{
border-bottom: 3px solid #32ff7e;
animation-name: linee;
border-radius: 50px; }

并且html代码是

<div class="line"></div>

Answer 1

您有几个语法错误。这是更正的版本：

@keyframes linee{
  0% { width:10px;}
  100%{ width:85px;}
}

.line{
  border-bottom: 3px solid #32ff7e;
  animation-name: linee;
  border-radius: 50px; 
  animation-duration:10s;
  animation-fill-mode: forwards;
}

<div class="line"></div>

Answer 2

运行此代码。您的问题已解决。

<!DOCTYPE html>
<html>

<head>
  <style>
    .line {
      border-bottom: 3px solid #32ff7e;
      border-radius: 50px;
      animation-name: linee;
      animation-duration: 10s;
    }
    
    @keyframes linee {
      0% {
        width: 10px;
      }
      100% {
        width: 85px;
      }
    }
  </style>
</head>

<body>
  <div class="line">Line</div>

</body>

</html>

打开页面时CSS动画无法开始工作

2 个答案: