Use transform to translate a node until it reaches it's parent's position

Question

Is there a way to improve my current implementation of an automated cell dynamic marquee. The current behavior matches the requirements, but is not as perfect as I would expect.

Current behavior

As shown in the demo, holding your mouse over an ellipsed cell, makes it into a good old scrolling marquee.

Expected behaviour

I'm trying to have my inner-wrapper-span stop scrolling when the rightmost part of the inner-wrapped-span reaches the rightmost part of the td.

The following code got me to the current "static" behaviour

100% {
    transform:translateX(-90%);
}

I use an arbitrary 90% because I don't know how I could use different units to achieve my goal. If you compare the result obtained in the first and third row, you'll notice that the span doesn't stop at the same portion of its "travel" depending on the length of its content (obviously because I use percentages).

I would think a solution would be similar to the following JQuery script :

var x = $(this).parent().width() - $(this).width();
$(this).addDynamicKeyframeDefinition("100%{ transform: translateX("+x+")}");

Unfortunatly the addDynamicKeyframeDefinition method doesn't exists. :-)

---

EDIT In light of vals's suggestion

• The provided demo has a fixed table size, most of tables in the real project have dynamic column sizes. Thus the probable need to dynamically set a value for translateeX().

Answer 1

You can add more than one transform, and they can be of the same function:

@keyframes scroll {
    0% {
        transform:translateX(0%);
    }
    100% {
        transform:translateX(10px) translateX(-100%);
    }
}

Will set the remaining space to 10px

fiddle

You can do what you want (translate the span until the right border adjusts to the container div border) using a wrapper (another one).

I have created a simple demo so that you can see the technique.

For this HTML

<table>
    <tr>
        <td>aaaaaaaaaa</td>
        <td><div><span>aaaaaaaaaa bbbbbb ccccc dddddd</span></div></td>
        <td>aaaaaaaaaa</td>
    </tr>
    <tr>
        <td>aaaaaaaaaa</td>
        <td><div><span>aaaaaaaaaa bbbbbb ccccc dddddd  eee fff ggg hhh jjjjj j</span></div></td>
        <td>aaaaaaaaaa</td>
    </tr>
</table>

The CSS is

table {
    width: 356px;
    table-layout:fixed;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;    
    border:1px solid black;
    padding:5px;
    position: relative;
}

div {
    border: solid 1px red;
    width: 100%;
    transition: all 2s;
}
span {
    display: inline-block;
    background-color: rgba(160,255,200,0.4);
    transition: all 2s;
}
td:hover div {
   -webkit-transform: translateX(100%);
}
td:hover span {
    -webkit-transform: translateX(-100%);
}

The first wrapper (the div) is set to 100% width. translating it to 100% sets its left border to the right of the parent. Now, translating the span -100%, moves the right border to the left border of the div, and so to the right border of the td.

fiddle

The div and the span have colored border and background so that the effect is visible.