Question

我正在设置0到100％之间的动画。

关键帧CSS：

@keyframes animate-line {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

线条CSS：

.line {
    animation: animate-line 5s infinite;
    background: none repeat scroll 0px 0px transparent;
    border-top: 2px solid rgba(255, 255, 255, 0.5);
    display: block;
    position: absolute;
    z-index: 9;
    height: 1px;
    -moz-transform: rotate(16deg);
    -webkit-transform: rotate(16deg);
    transform: rotate(16deg);
    left: 20px;
    top: 200px;
}

我在实时代码中使用供应商前缀，为了便于阅读，这里省略了。

你可以看到我用transform: rotate()旋转线条;这样做可以使线路从0变为100％。我可以从逻辑上思考它为什么这样做，我定义了左/顶属性，所以我认为它从top: 200px和left: 20px开始并按预期展开，但为什么它仍然想要转向？

Running demo on jsfiddle

希望有人可以指出这一点，我确信它很简单。

答案：感谢@barrett刚刚了解了一个新属性transform-origin: 0 0。对旋转的线进行动画制作会非常有用，如果其他人使用transform-origin: 0;做这件事，那就太大了，谢谢。

Answer 1

将其添加到.line上的样式表：

.line {
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
}

默认情况下，它会从中心转换，这就是它向上移动的原因。

Running demo

为旋转的线css设置动画？

1 个答案: