无法使 CSS3 动画连续答案

【问题标题】：Not able to make the CSS3 animation as continuous无法使 CSS3 动画连续
【发布时间】：2019-07-28 10:57:16
【问题描述】：

我正在关注一篇博客以了解 CSS3 动画。我想使用 CSS3 垂直做选取框效果。我关注了this example。但我的问题是为什么重启动画会有一些延迟？当滚动向下时，它不会立即从顶部开始。大约有 2,3 秒的延迟。如何在滚动结束后立即从顶部开始动画。我在这里附上 gif 文件以便更好地理解。

代码sn-p：

<!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>

【问题讨论】：

标签： css css-animations translate-animation

【解决方案1】：

您的动画立即开始，但您从位置 -100% 开始。

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

<!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(-50px);
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    /* 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(-50px);
    }
    100% {
      -moz-transform: translateY(100%);
    }
  }
  @-webkit-keyframes example3 {
    0% {
      -webkit-transform: translateY(-50px);
    }
    100% {
      -webkit-transform: translateY(100%);
    }
  }
  @keyframes example3 {
    0% {
      -moz-transform: translateY(-50px); /* Firefox bug fix */
      -webkit-transform: translateY(-50px); /* Firefox bug fix */
      transform: translateY(-50px);
    }
    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>

【讨论】：

结束和开始之间仍有一些延迟

【解决方案2】：

你需要重新调整动作。

我用你的解决方案设置了 3 个示例：第一个位置、第二个位置和动画。

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

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

.example {
  height: 200px;
  width: 100px;
  position: relative;
  border: solid 1px;
  margin-top: 200px;
  display: inline-block;
}

.example h3 {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  background-color: rgba(200, 200, 255, 0.7);
}

#ex1 h3 {
    transform: translateY(-100%);
}
#ex2 h3 {
    transform: translateY(100%);
}

#ex3 h3 {
  animation: example 15s linear infinite;
}
@keyframes example {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}
#ex4 h3 {
    top: -32px;
}
#ex5 h3 {
    top: -20px;
    transform: translateY(100%);
}
#ex6 h3 {
  animation: example2 15s linear infinite;
}
@keyframes example2 {
  0% {
    transform: translateY(-32px);
  }
  100% {
    transform: translateY(calc(-20px + 100%));
  }
}

<div class="example" id="ex1">
  <h3>Scrolling</h3>
</div>
<div class="example" id="ex2">
  <h3>Scrolling</h3>
</div>
<div class="example" id="ex3">
  <h3>Scrolling</h3>
</div>
<div class="example" id="ex4">
  <h3>Scrolling</h3>
</div>
<div class="example" id="ex5">
  <h3>Scrolling</h3>
</div>
<div class="example" id="ex6">
  <h3>Scrolling</h3>
</div>

【讨论】：

【解决方案3】：

您可以使用 CSS Position

实现此目的

通过将父容器设置为relative，子元素设置为absolute，可以无延迟地获得marquee效果。

下面是一个示例 sn-p 做进一步演示你想在你的选框里发生什么。在这里，我们使用 position: relative; 到父类 wrap 来使选取框元素 h4 的 position: absolute; 将其识别为其父级。

转到关键帧，我们将h4的位置设置为top: 0%，使其在开始时粘在容器上方和 top: calc(100% - 18px); 达到顶峰。

为什么我们需要在这里使用calc()？

基本上只在其峰值位置添加 100% 会溢出父元素之外的选取框，从而导致奇怪的行为。

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

18px 是您添加到元素中的每个文本的默认字体大小，我们将选取框的 css 设置为 padding: 0;和 margin: 0 删除内部和外部的额外空格，使选取框看起来像我们有开始延迟，因为我们只看到选取框内的文本未占用的空白空间；

.wrap {
  position: relative;
  height: 150px;
  width: 100px;
  background: gray;
}

.wrap h4 {
  text-align: center;
  position: absolute;
  top: 0%;
  left: 0%;
  padding: 0;
  margin: 0;
  background-color: red;
  width: 100%;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% {
    top: 0%;
  }
  100% {
    top: calc(100% - 18px);
  }
}

@-moz-keyframes marquee {
  0% {
    top: 0%;
  }
  100% {
    top: calc(100% - 18px);
  }
}

@-webkit-keyframes marquee {
  0% {
    top: 0%;
  }
  100% {
    top: calc(100% - 18px);
  }
}

<div class="wrap">
  <h4>Oopsie</h4>
</div>

【讨论】：