动画到内联样式

您已经知道内联样式是“不好的做法”。 内联样式不像单独文件中的 CSS 那样可重用，因此会造成效率低下的膨胀。 当然，除非并非如此。 在某些情况下，内联样式非常合理。 也许您有一个应用程序，用户可以在其中选择他们喜欢的颜色，然后您将身体的背景设置为该颜色。 在这种情况下，使用内联样式实际上比外部 CSS 更有效，因为它特定于一个用户和一个元素。

现在，假设您要动画到内联样式中设置的值。 假设您要动画一个进度条。 您从零开始，需要上升到任意值。 也许对服务器的调用告诉您上传的完成程度，并且您根据该程度设置值。

在我将近一年前发表的一篇文章中，我抱怨说您不能动画到内联样式。 您不能在内联样式中声明关键帧，并且您不知道要动画到的外部 CSS 中的最终值。 唉，我错了，因为我不知道这个货真价实的 CSS 小技巧。

<div class="progress-bar">
  <div style="width: 75%">Upload is 75% complete.</div>
</div>

诀窍是：只需从 @keyframes 中省略 to 或 100% 声明

@-webkit-keyframes progress-bar {
   0% { width: 0; }
}
@-moz-keyframes progress-bar {
   0% { width: 0; }
}
keyframes progress-bar {
   0% { width: 0; }
}

然后，您在进度条上调用动画

.progress-bar > div { 
  -webkit-animation: progress-bar 2s;
  -moz-animation: progress-bar 2s;
  animation: progress-bar 2s;
}

就这样，进度条将动画到内联样式设置的值。

查看 Pen 动画到内联样式 by Chris Coyier (@chriscoyier) on CodePen.

特别感谢 Michael Paryna，他给我发邮件告诉我这件事，让我尝试了一下。