Page 255 - css揭秘

animation: spin-reverse 3s infinite linear;
}

这样一来，在任意时间点上，假设第一套动画的旋转角度是 x，那么第
二套动画的旋转角度就正好是 360 – x，因为前者的角度值是不断增加的，
而后者则是相应减少的。这正是我们所期望的。于是在图 8-37 中可以看到，
它终于产生了我们梦寐以求的效果。

图 8-37
我们现在达到了想要的动画效果，
但代码稍显臃肿

虽然效果已经达到了，但这段代码仍然是有必要继续改进的。比如说，
两套动画中的各个参数其实是重复了两次的。如果我们需要调整动画周期的
话，还要修改两处，这显然是不够 DRY 的。我们可以很容易地解决这个问
题，让内层动画从父元素那里继承所有的动画属性，然后把动画名覆盖掉就
可以了：

@keyframes spin {
to { transform: rotate(1turn); }
}
@keyframes spin-reverse {
from { transform: rotate(1turn); }
}

.avatar {
animation: spin 3s infinite linear;
transform-origin: 50% 150px; /* 150px = 路径的半径 */
}

.avatar > img {
animation: inherit;
animation-name: spin-reverse;
}

不过再想一想，如果只是为了反转第一套动画，就又建了一套新动画，
有点浪费啊。还记得我们在“闪烁效果”中所提到的 animation-direction
属性吗？在那一篇攻略中，我们已经领会到了 alternate 这个值的实用之
处。而在这里，我们将会用到 reverse 这个值，它可以得到原始动画的反向
版本，这样我们就可以利用一套关键帧实现两套旋转动画：

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

224 第 8 章 过渡与动画

඀ࠡ JOEC