使用CSS动画进度条 [英] Animating progress bars with CSS

问题描述

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

So, I have a few different progress bars on this page - http://kaye.at/play/goals

这是我的HTML& CSS：

Here's my 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开始缓慢上升％，而不是仅仅出现在这里，但是我想以最简单的方式做到这一点。我最好的选择是什么，我当前使用的代码有可能吗？

I want to simply animate the progress bar so that it slowly goes up from 0% to whatever percentage it's at, rather than just appearing there, but I'd like to do it in the simplest way possible. What's my best option and is it possible with the current code I'm using?

推荐答案

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

The only way I can think to animate to your width set inline is to add another span, so the HTML ends up as:

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

需要额外的跨度，因为我们无法（仅使用CSS）检查内联内容样式想要宽度为正，并为其设置动画。不幸的是，我们无法为 auto 设置动画。

That extra span is needed, as we have no way (using just CSS) of checking what the inline style wants the width to be and so animating to it. And unfortunately we can't animate to auto.

CSS（您需要添加必要的前缀）：

The CSS (you'll need to add the necessary prefixes):

.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%; }
}

您可以在操作中看到此内容此处。不支持CSS动画的浏览器只会将条带变为最终状态。

You can see this in action here. Browsers that don't support CSS animations will just get the bar in its final state.

这篇关于使用CSS动画进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！