为什么 rotate(0deg) 很重要？

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% 关键帧中将 rotate(0deg) 添加到我的变换中时，圆才会旋转。为什么是这样？没有旋转（0度）：

<!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%' 值，否则用户代理将处理它并且不必将其设置为零。

The keyframe selector for a keyframe style rule consists of a comma-separated list of percentage values or the keywords ‘from’ or ‘to’. The selector is used to specify the percentage along the duration of the animation that the keyframe represents. The keyframe itself is specified by the block of property values declared on the selector. The keyword ‘from’ is equivalent to the value ‘0%’. The keyword ‘to’ is equivalent to the value ‘100%’. Note that the percentage unit specifier must be used on percentage values. Therefore, ‘0’ is an invalid keyframe selector.

If a ‘0%’ or ‘from’ keyframe is not specified, then the user agent constructs a ‘0%’ keyframe using the computed values of the properties being animated. If a ‘100%’ or ‘to’ keyframe is not specified, then the user agent constructs a ‘100%’ keyframe using the computed values of the properties being animated. If a keyframe selector specifies negative percentage values or values higher than 100%, then the keyframe will be ignored.

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

为什么 rotate(0deg) 很重要？

Why rotate(0deg) matters?

html

css

css-transforms