Verschieben von Text auf Schaltfläche Beschriftung wie Laufschrift mit CSS und JavaScript (nicht jQuery)

Question

Ich habe mehrere Schaltflächen mit dynamischem Text. Ich möchte von rechts nach links zirkulierenden Effekt auf die einzelnen Tasten Text mit Javascript oder CSS. Verwenden Sie nicht jQuery. Siehe unten Szenario

aktualisieren

Mein aktueller-Code

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

Aber es ist nicht richtig auf dynamischen Text arbeiten die Taste.

Answer 1

Ich habe Ihre Polsterung entfernt, so dass jetzt die Spannweite mit der Schaltfläche ausgerichtet ist.

Da die Schaltflächen immer 200 Pixel breit sind, sollte jetzt der erste Keyframe 200 Pixel nach rechts sein. Und die anderen Keyframes sind nur ebenso einfach:

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