javascript - 动画之间有延迟的 CSS Newsticker(和其他问题)

Question

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

• 如何消除动画完成和重新启动之间的延迟？
• 如何避免在运行完整的 Ticker-Wrap 之前 Ticker-Text 消失？编辑:看这里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 .

希望这对您有所帮助! :)