Html CSS动画在打开页面时不开始工作

我想做的是当有人打开页面时，一条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>

---

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

@关键帧线条{ 0%{宽度：10px；} 100%{宽度：85px；} } .线路{ 边框底部：3px实心32ff7e； 动画名称：linee； 边界半径：50px； 动画持续时间：10秒； 动画填充模式：正向； }

---

运行此代码。你的问题解决了

.线路{ 边框底部：3px实心32ff7e； 边界半径：50px； 动画名称：linee； 动画持续时间：10秒； } @关键帧线条{ 0% { 宽度：10px； } 100% { 宽度：85px； } } 线 你的代码被置乱，你的声明在类外，将它们移到类内，动画持续时间：10秒；和动画填充模式：向前；在元素的括号外。行。在动画填充模式中，缺少一个破折号。