Page 258 - css揭秘

transform: translate(50%,50%)
rotate(0turn)
translate(-50%, -50%);
}
}

.avatar {
animation: spin 3s infinite linear;
}

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

这段代码看起来臃肿得可怕，但别着急，我们接下来会大幅度改进它
的。请注意，我们现在已经不需要不同的变形原点了，而这正是我们先前需
要动用两个元素（和两套动画）的唯一理由。由于现在所有变形函数所使用
的都是相同的原点，我们可以把这两套动画合并为一套，并只用在 .avatar
1①
这一个元素上 ：
@keyframes spin {
from {
transform: translate(50%, 150px)
rotate(0turn)
translate(-50%, -150px)
translate(50%,50%)
rotate(1turn)
translate(-50%,-50%)
}
to {
transform: translate(50%, 150px)
rotate(1turn)
translate(-50%, -150px)
translate(50%,50%)
rotate(0turn)
translate(-50%, -50%);
}
}

.avatar { animation: spin 3s infinite linear; }

代码质量显然已经上了一个台阶，但仍然比较冗长、难以理解。我们可
以让它更加简单直观一些吗？确实还有几个值得一试的改进方法。
我们先从最简单的地方入手，把连续的 translate() 变形操作合并起
来，尤其是 translate(-50%, -150px) 和 translate(50%, 50%) 这样的
情况。但遗憾的是，百分比值和绝对长度是无法合并的（除非使用 calc()，
但那样一来代码同样会相当臃肿）。尽管如此，单纯水平方向上的位移还是

① 请注意，到了这一步，就不再需要两层 HTML 元素了：我们可以把 avatar 这个类直接加在
图片上，然后就可以去掉它外层的容器元素了，因为我们不再需要对这两层元素分别设置样
式了。

47 沿环形路径平移的动画 227

඀ࠡ JOEC