使用CSS动画选框如何确保文本完全不在屏幕上？

Question

我正在使用CSS动画选框。目标是让文本进入容器的右侧，然后离开容器的左侧，然后重新开始。

文本是具有可变文本长度的列表项列表。我无法弄清楚如何让动画在正确的时间结束。见下面的例子。这两个动画完全同步，因为translateX是相对于容器大小的。

相反，我希望translateX相对于ul内部文本的大小，以便每个动画都准确地从容器的右侧开始，并且当所有文本从容器的左侧消失时完全结束。

起点是正确的，但动画的结束点不是。

.container {
    width: 600px;
    background: pink;
    white-space: nowrap;
    overflow: hidden;
}

.container ul {
  margin: 0;
  animation: marquee 3s linear infinite;
}

.container ul li {
  display: inline;
  padding-right: 50px;
}

@keyframes marquee {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

<div class="container"><ul>
  <li>text1</li>
</ul></div>

<div class="container"><ul>
  <li>First text</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus commodo risus eget sodales. Sed pulvinar dictum ipsum commodo mollis. Proin consequat vestibulum pellentesque. Integer vel dictum leo. Fusce porttitor orci non tortor cursus, sit amet molestie odio imperdiet. Praesent eleifend, diam sit amet bibendum suscipit, nibh metus volutpat urna, vel vestibulum tortor velit ut nibh. Proin facilisis sagittis felis ut sodales.</li>
  <li>Last text</li>
</ul></div>

看来，translateX中的“100％”是相对于容器的大小而不是动画文本的大小。在消失之前，我需要更改以使文本完全消失在屏幕左侧？

更新

我将代码段直接添加到帖子而不是使用JSFiddle。