CSS Marquee for variable message lengths

Question

I am looking for marquee tag alternatives and found how to do this through css. However the messages I am using are of variable lengths, so is there an alternative to putting in the '45s' attribute to maybe 100% so that no matter how long or short the message is, the message will show all of the message and loop again once the message has been displayed?

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  color: #ffffff;
  background-color: #000000;
  font-family: Arial Rounded MT Bold;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;  /* show the marquee just outside the paragraph */
  animation: marquee 45s linear infinite;
}


@keyframes marquee {
  from  { text-indent:  0%}
  to    { text-indent: -150% }
}

<p id="PassengerNews_Scrollbar" class="microsoft marquee" style="height: 95%;  width: 90%;left: 5%;top: 2%;font-size: 7%;">
  <span>|*NewsData*|</span>
</p>

Answer 1

Use the jQuery.Marquee plugin (License: ISC). If you don't want to use the plugin, you can use following code snippet from the plugin to calculate the delay

// formula is to: (Width of the text node + width of the main container / Width of the main container) * speed;
o.duration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration;

With o.duration initialized with 5000 meaning 5 seconds.