CSS 动画之间有延迟的新贴纸（和其他问题）

Question

首先：我在CSS方面不是很熟练。我设法让 CSS Newsticker 起作用（来源：）。但不幸的是，它没有按预期工作。

如何消除动画完成和重新启动之间的延迟？
如何通过完整的 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。

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

CSS 动画之间有延迟的新贴纸（和其他问题）

CSS Newsticker with delay between animations (and other problems)

javascript

css

css-animations

marquee

ticker