CSS 关键帧:在页面加载时以动画形式/转换为内联值

Question

我正在研究一个基于CSS和HTML的百分比值条形表示的项目。代码如下所示：

.HTML：

<div class="chart">
  <div class="bar" style="width:43%"></div>
</div>

.CSS：

.chart {
  background-color: #DADADA;
  height: 2px;
  position: relative;
}
.chart .bar {
    background-color: #3D98C6;
    height: 100%;
}

我想做的是在页面加载时从 0% 开始条形宽度，然后将其动画化为内联值。我希望该值是内联的，以便我们的后端开发人员可以让Ruby on Rails在视图中输出一个百分比。我知道我可以通过过渡来做到这一点，我目前是这样做的：

.CSS：

.chart .bar {
  -moz-transition: width 1.25s linear;
  -webkit-transition: width 1.25s linear;
  -ms-transition: width 1.25s linear;
  -o-transition: width 1.25s linear;
  transition: width 1.25s linear;
}
body.jquery.csstransitions:not(.loaded) .chart-container .chart .bar {
  width: 0% !important;
}

JavaScript：

$(function() {
  $('body').addClass('jquery');
  // Way down in the code
  $('body').addClass('loaded');
});

这说明虽然用户支持 JavaScript，但他们的浏览器支持 CSS 过渡，并且"loaded"类尚未添加到正文中，所有栏的宽度均为 0%。一旦使用 jQuery 添加了 .loaded，柱线就会全部转换为内联值。

我对这种方法的问题是，用户启用 JavaScript 并添加"jquery"和"csstransitions"类的可能性很小，但在它进入添加类.loaded的代码之前它会由于某种原因而中断。这将导致所有条形都以 0% 的宽度显示。我参与的这个项目有很多人手在做，JavaScript有可能在正确的地方崩溃，导致我们的用户看到破碎的图表。如果我可以使用 CSS 关键帧动画从 0% 宽度到内联宽度进行动画处理，那么我可以将 JavaScript 排除在等式之外，并且知道代码要么对条形进行动画处理，要么只是加载它们而不加载动画。

有没有办法在页面加载时对宽度进行动画/过渡，而不依赖 JavaScript？

Answer 1

看起来我的问题实际上很容易回答。我以前从未使用过CSS关键帧动画，也没有意识到它们基本上是根据时间有条件地应用样式，然后在它们之间进行动画处理。这意味着，通过不对某个关键帧应用任何样式，接下来要应用样式的内容将只用动画代替空样式。这意味着我可以这样做：

.HTML：

<div class="chart">
  <div class="bar" style="width:43%;"></div>
</div>

.CSS：

@-moz-keyframes animate-bar {
    0%   { width: 0%; }
}
@-webkit-keyframes animate-bar {
    0%   { width: 0%; }
}
@-ms-keyframes animate-bar {
    0%   { width: 0%; }
}
@-o-keyframes animate-bar {
    0%   { width: 0%; }
}
@-keyframes animate-bar {
    0%   { width: 0%; }
}
.chart {
  background-color: #DADADA;
  height: 2px;
  position: relative;
}
.chart .bar {
  background-color: #3D98C6;
  height: 100%;
  -moz-animation: animate-bar 1.25s 1 linear;
  -webkit-animation: animate-bar 1.25s 1 linear;
  -ms-animation: animate-bar 1.25s 1 linear;
  -o-animation: animate-bar 1.25s 1 linear;
  animation: animate-bar 1.25s 1 linear;
}

0% 的开始动画将仅动画化为内联样式，因为没有完成样式意味着完成样式等效于覆盖该样式的任何样式。

编辑：

我创建了一个JS小提琴来向未来的访问者演示这一点。