Fade in/out element w/pure CSS

For Stack Overflow question: http://stackoverflow.com/questions/6730770/jquery-mouseenter-and-mouseleave-actions

HTML

<a href="#" onclick="toggle_position('slider');">Toggle position</a>
<p id="slider" class="left-pos">
This is a block that we want to animate<br/>
using CSS3 animations. We use a little<br/>
Javascript to change the class but otherwise<br/>
it is all in the CSS.<br/>
</p>

CSS

#slider
{
    position: absolute;
}
.left-pos
{
    left: 0;
    transition-property: left;
    transition-duration: 10s;
    transition-timing: ease;
    transition-delay: 0;
}
.right-pos
{
    left:100px;
    transition-property: left;
    transition-duration: 2s;
    transition-timing: ease;
    transition-delay: 0;
}

JavaScript

function toggle_position(elem_name)
{
    var elem = document.getElementById(elem_name);
    if (elem.classList.contains("left-pos"))
    {
        elem.classList.remove("left-pos");
        elem.classList.add("right-pos");
    }
    else
    {
        elem.classList.remove("right-pos");
        elem.classList.add("left-pos");
    }
}