CSS3动画-在类上向左移动不起作用

Question

I'm currently looking in to and learning how to properly do CSS3 Animations and I've run in to a bit of trouble. I have a box currently sitting in the horizontal center of the page, and I'd like to have it move to the left with a transition when a class is applied to it.

characterBox is already attached to the div when the page loads. When I add characterActive to the div with jQuery though, it moves directly to the left without the transition. What am I doing wrong? Any help is appreciated!

.characterActive {
    left: 15px;
    position: absolute;
}
.characterBox {
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 15px;
    -webkit-transition: left 0.5s ease;
    -moz-transition: left 0.5s ease;
    -o-transition: left 0.5s ease;
    -ms-transition: left 0.5s ease;
    transition: left 0.5s ease;
/* Sit Horizontally */
    margin: auto;
    text-align: center;
}

Answer 1

You are switching from static to absolute positioning by adding that class, which is ok, but there's nothing to transition from because the left value from the static element is auto (transitions from/to automatic values are not reliable, see this bug report )

So add:

.characterBox{
  left: 0px;
}

Also you have to switch the order of the definitions, because your 2nd left rule would override the first ( http://jsfiddle.net/yLgkK/ )

Answer 2

It looks like that it doesnt work with the property left . try to use margin-left instead.