css - 动画旋转线 css？

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%。我可以从逻辑上思考它为什么这样做，我定义了 left/top 属性，所以我认为它从 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