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: 200pxand开始left: 20px并按预期扩展，但为什么它仍然想要转向？

Running demo on jsfiddle

希望有人能指出这一点，我相信它很简单。

答案：transform-origin: 0 0感谢@barrett，刚刚了解了一个新属性。为旋转线设置动画可能很有用，如果其他人这样做，使用transform-origin: 0;是一个巨大的部分，谢谢。

Answer 1

将此添加到您的样式表中.line：

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

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

Running demo