Page 110 - css揭秘

解决方案恰恰来源于一个看似最不沾边的地方。我们将使用上面刚刚
用到的那个动画，但动画必须处于暂停状态。跟常规情形下我们让动画动起
来的做法不一样，这里我们要用负的动画延时来直接跳至动画中的任意时间
点，并且定格在那里。很难理解？别担心，先来看看负的 animation-delay
在规范中的解释。

“一个负的延时值是合法的。与 0s 的延时类似，它意味着动画会立即
开始播放，但会自动前进到延时值的绝对值处，就好像动画在过去已经播
放了指定的时间一样。因此实际效果就是动画跳过指定时间而从中间开始
播放了。” 图 3-56
我们最终得到了正确的 60% 饼图
——CSS 动画（第一版）（http://w3.org/TR/css-animations/
#animation-delay） 小提示
因为我们的动画是暂停的，所以动画的第一帧（由负的 animation- 你可以把这个技巧应用到其
delay 值定义）将是唯一显示出的那一帧。在饼图上显出的比率就是我们的 他场景中，比如你想从一条渐变
中摘出几个颜色值而不想产生重
animation-delay 值在总的动画持续时间中所占的比率。举例来说，如果动
复的代码或者复杂的计算，又或
画持续时间定为 6s，我们只需要把 animation-delay 设置为 -1.2s，就能 者你想以步进的方式来调试动画，
显示出 20% 的比率。为了简化这个计算过程，我们可以设置一个长达 100s 等等。在 play.csssecrets.io/
的持续时间。别忘了，这里的动画是永远处在暂停状态的，因此我们指定的 static-interpolation 中，我为
这个技巧制作了一个单独的简化
持续时间并不会产生其他副作用。
示例。
现在还剩最后一个问题：动画是作用在伪元素上的，但我们希望最终
内联样式可以设置在 .pie 元素上。不过，由于 <div> 上并没有任何动画效
果，我们可以用内联样式的方式为其设置 animation-delay 属性，然后再
在伪元素上应用 animation-delay: inherit; 属性。综合以上要素，如果
要让饼图显示为 20% 和 60%，则结构代码为：

<div class="pie" HTML
style="animation-delay: -20s"></div>
<div class="pie"
style="animation-delay: -60s"></div>

我们刚刚为动画准备的 CSS 代码就会变成（这里省去了 .pie 的相关样
式，因为跟前面相比没有变化）：

@keyframes spin {
to { transform: rotate(.5turn); }
}

@keyframes bg {
50% { background: #655; }
}

.pie::before {
/* [其余的样式代码保持原样] */
animation: spin 50s linear infinite,
bg 100s step-end infinite; 图 3-57
animation-play-state: paused; 文本内容在隐藏之前的样子

14 简单的饼图 79

඀ࠡ JOEC