Page 259 - css揭秘

可以相互抵消的，因此这基本上相当于我们只在 Y 轴上做了两次位移操作
（translateY(-150px) translateY(50%)）。此外，由于同一关键帧内的两
次旋转也会相互抵消，我们还可以把旋转之前和之后的水平位移动作去掉，
再把垂直位移合并起来。这样一来就得到了如下的关键帧：

@keyframes spin {
from {
transform: translateY(150px) translateY(-50%)
rotate(0turn)
translateY(-150px) translateY(50%)
rotate(1turn);

}
to {
transform: translateY(150px) translateY(-50%)
rotate(1turn)
translateY(-150px) translateY(50%)
rotate(0turn);
}
}

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

这样代码会稍短一些，重复度也稍低一些，但还不够好。我们还能更进
一步吗？如果把头像放在圆心并以此作为起点（如图 8-39 所示），我们就可
以消除最开始的那两个位移操作了，而实际上这两个位移在本质上所做的就
是把它放在圆心。然后，这个动画就会变为：

@keyframes spin {
from {
transform: rotate(0turn)
translateY(-150px) translateY(50%)
rotate(1turn);
}
图 8-39 to {
transform: rotate(1turn)
如果我们在一开始是把头像居中
translateY(-150px) translateY(50%)
的，那么关键帧代码还可以再稍 rotate(0turn);
微精简一些；此外，万一浏览器 }
不支持动画的话，这个状态也将 }

是我们得到的回退样式（这种样
.avatar { animation: spin 3s infinite linear; }
式可能是也可能不是我们希望看
到的）
这似乎已经是我们在当下所能做到的最优结果了。代码还没有彻底满
足 DRY 的要求，但已经相当简短了。我们已经尽可能减小了代码的重复度，
而且除去了冗余的 HTML 元素。如果要让它变得完全 DRY，避免路径的半
径值在代码中重复出现，那就需要请出预处理器了。这一步就作练习留给各
位读者去思考吧！

试一试 play.csssecrets.io/circular

228 第 8 章 过渡与动画

඀ࠡ JOEC