无法使CSS3动画连续_Css_Css Animations_Translate Animation

无法使CSS3动画连续

css

无法使CSS3动画连续,css,css-animations,translate-animation,Css,Css Animations,Translate Animation,我通过一个博客了解CSS3动画。我想用CSS3垂直制作字幕效果。我跟着。但我的问题是，为什么重新启动动画会有一些延迟？当滚动到“向下”时，它不会立即从顶部开始。大约有2.3秒的延迟。如何在滚动结束后立即从顶部开始动画。我在这里附上gif文件，以便更好地理解代码段： <!DOCTYPE html> <title>Example</title>  <style> .example3 { height:

我通过一个博客了解CSS3动画。我想用CSS3垂直制作字幕效果。我跟着。但我的问题是，为什么重新启动动画会有一些延迟？当滚动到“向下”时，它不会立即从顶部开始。大约有2.3秒的延迟。如何在滚动结束后立即从顶部开始动画。我在这里附上gif文件，以便更好地理解

代码段：

<!DOCTYPE html>
<title>Example</title>

<!-- Styles --> 
<style>
.example3 {
 height: 200px; 
 overflow: hidden;
 position: relative;
}
.example3 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateY(-100%);
 -webkit-transform:translateY(-100%);   
 transform:translateY(-100%);
 /* Apply animation to this element */  
 -moz-animation: example3 15s linear infinite;
 -webkit-animation: example3 15s linear infinite;
 animation: example3 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example3 {
 0%   { -moz-transform: translateY(-100%); }
 100% { -moz-transform: translateY(100%); }
}
@-webkit-keyframes example3 {
 0%   { -webkit-transform: translateY(-100%); }
 100% { -webkit-transform: translateY(100%); }
}
@keyframes example3 {
 0%   { 
 -moz-transform: translateY(-100%); /* Firefox bug fix */
 -webkit-transform: translateY(-100%); /* Firefox bug fix */
 transform: translateY(-100%);      
 }
 100% { 
 -moz-transform: translateY(100%); /* Firefox bug fix */
 -webkit-transform: translateY(100%); /* Firefox bug fix */
 transform: translateY(100%); 
 }
}
</style>

<!-- HTML -->
<div class="example3">
<h3>Scrolling down... </h3>
</div>


例子
.例3{
高度：200px；
溢出：隐藏；
位置：相对位置；
}
.例3 h3{
位置：绝对位置；
宽度：100%；
身高：100%；
保证金：0；
线高：50px；
文本对齐：居中；
/*起始位置*/
-moz变换：translateY（-100%）；
-webkit转换：translateY（-100%）；
转换：translateY（-100%）；
/*将动画应用于此元素*/
-moz动画：示例3 15s线性无限；
-webkit动画：示例3 15s线性无限；
动画：示例3 15s线性无限；
}
/*移动它（定义动画）*/
@-moz关键帧示例3{
0%{-moz变换：translateY（-100%）；}
100%{moz变换：translateY（100%）；}
}
@-webkit关键帧示例3{
0%{-webkit转换：translateY（-100%）；}
100%{-webkit转换：translateY（100%）；}
}
@关键帧示例3{
0%   { 
-moz转换：translateY（-100%）；/*Firefox错误修复*/
-webkit转换：translateY（-100%）；/*Firefox错误修复*/
转换：translateY（-100%）；
}
100% { 
-moz转换：translateY（100%）；/*Firefox错误修复*/
-webkit转换：translateY（100%）；/*Firefox错误修复*/
转化：translateY（100%）；
}
}
向下滚动。。。

你的动画很快就开始了，但你是从位置-100%开始的

如果要从顶部开始，请将每个关键帧从-100%更改为0。如果您想立即从顶部向下滚动，请尝试将其更改为与文本行高度（-50px）相等

示例
.例3{
高度：200px；
溢出：隐藏；
位置：相对位置；
}
.例3 h3{
位置：绝对位置；
宽度：100%；
身高：100%；
保证金：0；
线高：50px；
文本对齐：居中；
/*起始位置*/
-moz变换：translateY（-50px）；
-webkit转换：translateY（-50px）；
转换：translateY（-50px）；
/*将动画应用于此元素*/
-moz动画：示例3 15s线性无限；
-webkit动画：示例3 15s线性无限；
动画：示例3 15s线性无限；
}
/*移动它（定义动画）*/
@-moz关键帧示例3{
0% {
-moz变换：translateY（-50px）；
}
100% {
-moz变换：translateY（100%）；
}
}
@-webkit关键帧示例3{
0% {
-webkit转换：translateY（-50px）；
}
100% {
-webkit转换：translateY（100%）；
}
}
@关键帧示例3{
0% {
-moz转换：translateY（-50px）；/*Firefox错误修复*/
-webkit转换：translateY（-50px）；/*Firefox错误修复*/
转换：translateY（-50px）；
}
100% {
-moz转换：translateY（100%）；/*Firefox错误修复*/
-webkit转换：translateY（100%）；/*Firefox错误修复*/
转化：translateY（100%）；
}
}
向下滚动…

您需要重新调整移动

我已经为您的解决方案设置了3个示例：第一个位置、第二个位置和动画

然后，还有3个可能的解决方案示例，包括初始状态、最终状态和动画

我已经移除了溢出：隐藏，并将元素着色为半透明，这样就可以很容易地看到正在发生的事情

。示例{
高度：200px；
宽度：100px；
位置：相对位置；
边框：实心1px；
利润上限：200px；
显示：内联块；
}
.示例h3{
位置：绝对位置；
宽度：100%；
身高：100%；
保证金：0；
线高：50px；
文本对齐：居中；
背景色：rgba（200200255,0.7）；
}
#ex1 h3{
转换：translateY（-100%）；
}
#ex2 h3{
转化：translateY（100%）；
}
#ex3 h3{
动画：示例15s线性无限；
}
@关键帧示例{
0% {
转换：translateY（-100%）；
}
100% {
转化：translateY（100%）；
}
}
#ex4 h3{
顶部：-32px；
}
#ex5 h3{
顶部：-20px；
转化：translateY（100%）；
}
#ex6 h3{
动画：示例2 15s线性无限；
}
@关键帧示例2{
0% {
transform:translateY（-32px）；
}
100% {
转换：translateY（计算（-20px+100%）；
}
}


滚动
滚动
滚动
滚动
滚动
滚动

您可以使用CSS位置来实现这一点

通过将父容器设置为相对，将子元素设置为绝对，可以毫不延迟地获得选框效果

下面是一个示例片段，进一步演示您希望在您的字幕中发生什么。这里，我们使用了位置：relative到父类换行，使位置为绝对位置将其识别为其父元素
转到关键帧，我们将h4的位置设置为top:0%，使其在开始时粘在容器上方，并top:calc（100%-18px）在它的顶峰
为什么我们需要在这里使用calc（）

基本上，仅将其峰值位置添加100%将溢出父元素之外的字幕，导致奇怪的行为

为什么计算（100%-18px）

18px是添加到元素中的每个文本的默认字体大小，我们将字幕的css设置为padding:0；和边距：0 < /强>删除内部和外部的额外空间，使框看起来像我们开始延迟，因为我们只看到空白的空间内没有文字框内的文字；<李>

.wrap{ 位置：相对位置；高度：150便士