html - 使用 CSS 动画化进度条

Question

所以，我在这个页面上有几个不同的进度条 - http://kaye.at/play/goals

这是我的 HTML 和 CSS:

<div class="meter"><span style="width: 100%;"></span></div>


.meter { 
height: 5px;
position: relative;
background: #f3efe6;
z-index: 0;
margin-top: -5px;
overflow: hidden;
}

.meter > span {
z-index: 50;
display: block;
height: 100%;
background-color: #e4c465;
position: relative;
overflow: hidden;
}

我只想为进度条设置动画，使其从 0% 缓慢上升到当前的任何百分比，而不是仅仅出现在那里，但我想以尽可能简单的方式进行。我的最佳选择是什么？我使用的当前代码是否可行？

Answer 1

我能想到的使内联宽度设置动画的唯一方法是添加另一个 span，因此 HTML 最终为:

<div class="meter">
    <span style="width:80%;"><span class="progress"></span></span>
</div>

需要额外的跨度，因为我们无法(仅使用 CSS)检查内联样式想要的宽度并因此对其进行动画处理。不幸的是，我们无法将动画设置为auto。

CSS(您需要添加必要的前缀):

.meter { 
    height: 5px;
    position: relative;
    background: #f3efe6;
    overflow: hidden;
}

.meter span {
    display: block;
    height: 100%;
}

.progress {
    background-color: #e4c465;
    animation: progressBar 3s ease-in-out;
    animation-fill-mode:both; 
}

@keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

您可以在实际操作中看到这一点 here .不支持 CSS 动画的浏览器只会获得最终状态的栏。