CSS动画autroscrolling文本问题

我有一个autoscrolling文本，问题是动画重新开始之前div是完整的。CSS动画autroscrolling文本问题

你可以看看这里：https://jsfiddle.net/2oLf47o9/2/

这是动画部件

-webkit-animation-name: move; 
-webkit-animation-duration: 5s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: up; 
-webkit-animation-timing-function: linear;

我想字母滚动，直到“Z”，并从“A”再次重新启动。我该怎么做？

来源

2017-01-16 Federico

您只需增加动画在100％完成时预期达到的边距高度。在这种情况下，设置了CSS是：

@-webkit-keyframes move { 
    0% { /* Start of the animation */ 
     margin-top: 100vh; 
    } 
    100% { /* End of the animation */ 
     margin-top: -100vh; 
    } 
}

所以，你只需要改变动画的100％的版本预计将一些较高的利润率（与方式VH单位工作，这意味着设定值时），当我测试这个例子时，-200vh很好地工作。

更改代码如下：

100% { /* End of the animation */ 
    margin-top: -200vh; 
}

来源

2017-01-16 10:57:17 Callum

感谢@CallumErrington，如果我希望动画结束的确切时间，工程吃上一顿美味，但什么最后一封信已经通过了浏览器的顶部？这是纯粹的CSS可行吗？ – Federico

@Federico它只是一个混淆动画值的问题。因此，如果你做@ GL.awog所说的话，那似乎是一种更好的方式来做到这一点，并尝试'0％{transform：translateY（50％）; }'摆脱延迟。 – Callum

在这种情况下，你最好使用变换

：翻译，而不是边距，因为前者适用于目标（#box）的边框，而后者则是容器的大小。

@-webkit-keyframes move { 
    0% { 
     transform:translateY(100%); 
    } 
    100% { 
     transform:translateY(-100%); 
    } 
}

demo

和版本，而 “迭代之间的延迟”

demo2

来源

2017-01-16 11:11:19

非常感谢你的工作！为什么重新启动有延迟？有什么我可以做的，以加快重启？ – Federico

https://jsfiddle.net/2oLf47o9/16/我将margin-top作为初始静态值返回 –

CSS动画autroscrolling文本问题

回答

相关问题