Question

尝试使用CSS3动画在50px半径范围内连续制作圆形轨道：

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 10px;
    height: 10px;
    background-color: black;
    position: absolute;
    -webkit-animation-name: example;
    -webkit-animation-duration: 3s;
animation:example 1s infinite linear;
border-radius:50px;
transform-origin:bottom left;
left:50%;
top:50px;
}
@-webkit-keyframes example {
    0%   {transform:rotate(0deg) translateX(50px);}
    100% {transform:rotate(360deg) translateX(50px);}
}
</style>
</head>
<body>
<div></div>

</body>
</html>

当我在0％关键帧中包含旋转（0deg）到我的变换时，圆圈只会旋转。为什么是这样？没有旋转（0deg）：

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 10px;
    height: 10px;
    background-color: black;
    position: absolute;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
animation:example 1s infinite linear;
border-radius:50px;
transform-origin:bottom left;
left:50%;
top:50px;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {transform: translateX(50px);}
    100% {transform:rotate(360deg) translateX(50px);}
}
</style>
</head>
<body>
<div></div>

</body>
</html>

Answer 1

关键帧用于定义哪些参数正在更改以及从哪个值更改。如果没有定义某些东西，则不会假定它为0，但假定它不是序列的一部分。与此同时，一些浏览器可能会采用不同的方式对待它。

Answer 2

应始终定义'from'或'0％'值，否则用户代理将处理它而不是必须将其设置为零。

关键帧样式规则的关键帧选择器由逗号分隔的百分比值列表或关键字“from”或“to”组成。选择器用于指定关键帧表示的动画持续时间内的百分比。关键帧本身由选择器上声明的属性值块指定。关键字“from”等效于值“0％”。关键字“to”等效于值“100％”。请注意，百分比单位说明符必须用于百分比值。因此，'0'是无效的关键帧选择器。

如果未指定“0％”或“来自”关键帧，则用户代理使用动画属性的计算值构造“0％”关键帧。如果为'100'未指定％'或'to'关键帧，然后用户代理使用动画属性的计算值构造'100％'关键帧。如果关键帧选择器指定负百分比值或高于100％的值，则将忽略关键帧。

来源：https://www.w3.org/TR/css3-animations/

为什么旋转（0deg）很重要？

2 个答案: