我正在为一条从 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
and开始left: 20px
并按预期扩展,但为什么它仍然想要转向?
希望有人能指出这一点,我相信它很简单。
答案:transform-origin: 0 0
感谢@barrett,刚刚了解了一个新属性。为旋转线设置动画可能很有用,如果其他人这样做,使用transform-origin: 0;
是一个巨大的部分,谢谢。