javascript - 使用 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

我已经删除了你的填充，所以现在跨度与按钮对齐。

因为按钮总是 200 像素宽，现在第一个关键帧应该在右边 200 像素。其他关键帧也同样简单:

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