css3 transition, cant get it to work

Question

I'm trying to develop a functionality where only the rightmost 10 or 15px of a button/link is seen at the edge of a table to indicate which status is set for that row. If the user hovers the edge of the partially hidden element, the element shall slide into view so that the user can see the status text. I've been trying this and have created a fiddle but can not get the animation to trigger with the desired duration and easing it just changes position now and does not do so smoothly. Any pointers?

here is the fiddle link and below some html and css

http://jsfiddle.net/UT5kf/

<table>
    <tbody>
        <tr>
            <td data-value="5 Loremifierad">
                <span class="status-strip prospect">
                    5 Loremifierad
                </span>
            </td>
            <td data-value="Pixar Inc">
                Pixar Inc
            </td>
            <td data-value="170 000">
                170 000
            </td>
            <td data-value="7%">
                7%
            </td>
            <td data-value="20%">
                <div class="progress">
                    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" class="progress-bar" role="progressbar" style="width: 20%;">
                        <span>20%</span>
                    </div>
                </div>
            </td>
            <td data-value="2014-04-22">
                2014-04-22
            </td>
            <td data-value="Jonathan Swift">
                Jonathan Swift
            </td>
        </tr>

        <tr>
            <td data-value="5 Loremifierad">
                <span class="status-strip credited">
                    5 Loremifierad
                </span>
            </td>
            <td data-value="Pixar Inc">
                Pixar Inc
            </td>
            <td data-value="170 000">
                170 000
            </td>
            <td data-value="7%">
                7%
            </td>
            <td data-value="20%">
                <div class="progress">
                    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" class="progress-bar" role="progressbar" style="width: 20%;">
                        <span>20%</span>
                    </div>
                </div>
            </td>
            <td data-value="2014-04-22">
                2014-04-22
            </td>
            <td data-value="Jonathan Swift">
                Jonathan Swift
            </td>
        </tr>
    </tbody>
</table>

<style>  .status-strip{
    transition: left 2s ease-in-out, opacity 2.2s ease-in-out;
    display:inline-block;width:100px;
    margin-left:-75px;
  }


  .status-strip {
    background: #8ec63f;
    transition-property: background;
    transition-duration: 0.5s;
    transition-timing-function: linear;
  }
  .status-strip:hover {
    background: yellow;
    margin-left:0px;}

Answer 1

Change your transition to:

Demo Fiddle

transition: margin-left 0.4s ease-in-out, opacity 0.6s ease-in-out;

You are currently referencing left and not margin-left, which is the property you are subsequently changing.

nb. You also include a transition on opacity but haven't set any values, not sure if this is meant to be there.