首页 文章

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

提问于
浏览 次
2

试图使用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>
html css css3 css-transforms

2 回答

  • 3

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

    回复于
  • 0

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

    关键帧样式规则的关键帧选择器由逗号分隔的百分比值列表或关键字“from”或“to”组成 . 选择器用于指定关键帧表示的动画持续时间内的百分比 . 关键帧本身由选择器上声明的属性值块指定 . 关键字“from”等效于值“0％” . 关键字“to”等效于值“100％” . 请注意，百分比单位说明符必须用于百分比值 . 因此，'0'是无效的关键帧选择器 . 如果未指定“0％”或“来自”关键帧，则用户代理使用要设置动画的属性的计算值构造“0％”关键帧 . 如果未指定“100％”或“到”关键帧，则用户代理使用动画属性的计算值构造“100％”关键帧 . 如果关键帧选择器指定负百分比值或高于100％的值，则将忽略关键帧 .

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

    回复于

相关问题