Live
<div class="wrap"> <span class="one" title="Overflow scorll left to right Overflow">Overflow scorll left to right Overflow</span> <span class="one" title="AAA BBB CCC DDD EEE FFF DDD GGG">AAA BBB CCC DDD EEE FFF DDD GGG</span> <span class="" title="AAA BBB CCC">AAA BBB CCC</span> <span class="one" title="AAA BBB CCC DDD EEE FFF DDD GGG HHH III">AAA BBB CCC DDD EEE FFF DDD GGG HHH III</span></div>
Live
x
.wrap { position: relative; width: 200px; height: 100vh; background: #ddd; overflow: hidden;}span { display: inline-block; white-space: nowrap; padding: 5px; line-height: 24px; cursor: pointer;}.one:hover { animation: move 5s infinite alternate linear;}@keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(calc(-100% + 200px), 0); }}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.