CSS关键帧：在页面加载时动画/转换为内联值答案

【问题标题】：CSS keyframes: animating/transitioning to an inline value on page loadCSS关键帧：在页面加载时动画/转换为内联值
【发布时间】：2012-06-29 08:53:00
【问题描述】：

我正在开发一个项目，该项目使用基于 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 过渡，并且“已加载”类尚未添加到正文中，但所有条的宽度均为 0%。使用 jQuery 添加 .loaded 后，所有条形都会转换为内联值。

我对这种方法的问题是，用户启用 JavaScript 并添加“jquery”和“csstransitions”类的可能性很小，但它会在到达之前由于某种原因而中断添加类.loaded的代码。这将导致所有条都以 0% 的宽度出现。我从事的这个项目有很多人参与其中，JavaScript 有可能在正确的位置发生故障，导致我们的用户看到损坏的图表。如果我可以改用 CSS 关键帧动画将 0% 宽度设置为内联宽度，那么我可以将 JavaScript 排除在等式之外，并且知道代码可以为条设置动画，或者只在没有动画的情况下加载它们。

有什么方法可以在页面加载时动画/过渡宽度，而不依赖于 JavaScript？

【问题讨论】：

如果你敢的话，也许你可以在结束 </body> 标记之前插入一个过渡启用样式表：)

标签： jquery css css-transitions css-animations

【解决方案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 Fiddle 来向未来的访问者展示这一点。

【讨论】：