CSS Newsticker 动画之间有延迟（和其他问题）

Question

首先：我对 CSS 不是很熟练。我设法让 CSS Newsticker 工作（来源：Pure CSS ticker without absolute positioning）。但不幸的是，它没有按预期工作。

• 如何消除动画完成和重新启动之间的延迟？
• 如何避免 Ticker-Text 在运行完整的 Ticker-Wrap 之前消失？编辑：见这里https://jsfiddle.net/uLvzrtg0/ - 它似乎发生在一个固定的宽度？

• 使动画时间变量取决于输入文本长度的最佳方法是什么？ （我已经尝试过 Javascript，它工作得还不错 - 除了在 IE 中）

  <script>
  var vSpeed = (5+params[0].length*.18)+"s";
      if(params[0]=="")
      {
        document.getElementById("tickerwrap").style.display="none";
      }else{
      document.getElementById("ticker").style["-webkit-animation-duration"] = vSpeed;  
      document.getElementById("ticker").style["animation-duration"] = vSpeed;  
      }
  

JSFiddle 举个例子：https://jsfiddle.net/08921sek/

<p>Content before ticker</p>
  <div id="tickerwrap">
    <div id="ticker">
This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.
    </div>
  </div>
<p>Content after ticker</p>
<style>
@keyframes customticker {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}


/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}


/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
  display: inline-block;
  white-space: nowrap;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: customticker;
  animation-name: customticker;
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
}

</style>

感谢您的任何建议！对不起，如果我没有遵守一些规则！

最好的问候 购物

Answer 1

您可以从transform: translate3d(0, 0, 0); 开始动画，为此您可能需要进行其他更改，例如制作ticker padding-right: 100%; 和tickerwrap padding-left: 100%;。对于第二个问题（避免文本消失），您可能需要再添加一个容器并将其设为overflow:hidden;。

请看下面的片段：

/* Specifying the name for animation keyframes and keyframes themselves */
@keyframes customticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}


/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding-left: 100%;
}


/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
  display: inline-block;
  white-space: nowrap;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: customticker;
  animation-name: customticker;
  -webkit-animation-duration: 7s;
  animation-duration: 7s;
  padding-right: 100%;
}

#container {
  overflow:hidden;
  width:100%;
}

<p>Content before ticker</p>
  <div id="container">
  
  <div id="tickerwrap">
    <div id="ticker">This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.</div>
  </div>
  </div>
<p>Content after ticker</p>

你也可以测试一下here。

希望本文对您有所帮助！ :)