CSS Newsticker with delay between animations (and other problems)

Question

first of all: I'm not very skilled in CSS. I managed to get a CSS Newsticker to work (source: Pure CSS ticker without absolute positioning). But unfortunately it doesn't work as intended.

• How do I get rid of the delay between the completions of the animation and the restart?
• How do I avoid the Ticker-Text to disappear before running through the complete Ticker-Wrap? Edit: See here https://jsfiddle.net/uLvzrtg0/ - it seems to happen with a fixed width?

• What is the best way to make the animation time variable dependant on length of Input-text? (I've tried Javascript and it works kinda well - except in 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 with an example: 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>

Thanks for any advice! And sorry if I didn't follow some rules!

Best regards shoop

Answer 1

You can start animation from transform: translate3d(0, 0, 0); And for that you might need additional changes like making ticker padding-right: 100%; and tickerwrap padding-left: 100%;. For the second question (avoid disappearing text), you might need to add one more container and make it overflow:hidden;.

See the Snippet below:

/* 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>

You can also test it here.

Hope this wilkl help you! :)