在按钮标题上滑动文本，如使用css和javascript（不是jQuery）的选框

Question

我有多个动态文字按钮。我想用javascript或CSS在每个按钮文本上留下圆形滑动效果。不使用jQuery。见下面的场景

更新

我当前的代码

/* Make it a marquee */
    .marquee {
        width: 200px;margin: 0 auto;white-space: nowrap;overflow: hidden;
    }
    .marquee span {
        display: inline-block;
        padding-left: 100%;
        text-indent: 0;
        animation: marquee 10s linear infinite;
    }
    .marquee span:hover {
        animation-play-state: paused
    }/* Make it move */
    @keyframes marquee {
        0% { transform: translate(0, 0); }
        30% { transform: translate(-43%, 0); }
        60% { transform: translate(-43%, 0); }
        100% { transform: translate(-100%, 0); }
    }

<button class="marquee">
  <span>Lorem Ipsum is simply dummy text</span>
</button>
<button class="marquee">
  <span>LoremLorem Ipsum is simply dummy Ipsum is simply dummy text</span>
</button>

但它在按钮上的动态文本上无法正常工作。

Answer 1

我已删除了您的填充，因此现在跨度与按钮对齐。

由于按钮总是200px宽，现在第一个关键帧应该是200px到右边。而其他关键帧也同样容易：

/* Make it a marquee */
    .marquee {
        width: 200px;margin: 0 auto;white-space: nowrap;overflow: hidden;
    }
    .marquee span {
        display: inline-block;
        text-indent: 0;
        animation: marquee 10s linear infinite;
    }
    .marquee span:hover {
        animation-play-state: paused
    }/* Make it move */
    @keyframes marquee {
        0% { transform: translate(200px, 0); }
        30% { transform: translate(0, 0); }
        60% { transform: translate(0, 0); }
        100% { transform: translate(-100%, 0); }
    }

<button class="marquee">
  <span>Lorem Ipsum is simply dummy text</span>
</button>
<button class="marquee">
  <span>LoremLorem Ipsum is simply dummy Ipsum is simply dummy text</span>
</button>