In my example when a user hovers over a text that is too long for its container
it will start scrolling so the entire content can be read.
My problem is that I don't know how to adjust the transition duration
according to the length of the content.
I want that the text scrolls with a consistent speed across all containers.
body > div
{
width: 200px;
height: 50px;
overflow: hidden;
font-family: sans-serif;
margin-bottom: 10px;
font-size: 18px;
box-shadow: 15px 0px 0px #404040 inset, -15px 0px 0px #404040 inset;
}
div div
{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
height: 50px;
background: #404040;
white-space: nowrap;
line-height: 50px;
color: #fff;
padding: 0px 15px;
float: left;
transform: translate(0px);
box-sizing: border-box;
position: relative;
z-index: -1;
}
div:hover div
{
width: unset;
overflow: unset;
text-overflow: unset;
transition: transform 2s linear;
transform: translate(calc(200px - 100%));
}<div>
<div>Lorem ipsum dolor sit amet,</div>
</div>
<div>
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</div>
</div>
<div>
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</div>
</div>