CSS Newsticker с задержкой между анимациями (и другими проблемами)

прежде всего: я не очень хорошо разбираюсь в CSS. Мне удалось заставить работать CSS Newsticker (источник: Чистый CSS-тикер без абсолютного позиционирования). Но, к сожалению, это не работает так, как задумано.

• Как избавиться от задержки между завершением анимации и перезапуском?
• Как сделать так, чтобы 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 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>

Спасибо за любой совет! И извините, если я не следовал некоторым правилам!

С уважением Шуп