CSS3 Animations - Переместить влево на класс добавить не работает

В настоящее время я просматриваю и изучаю, как правильно создавать анимации CSS3, и я столкнулся с проблемой. У меня есть ящик, который сейчас сидит в горизонтальном центре страницы, и я хотел бы, чтобы он двигался влево с переходом, когда к нему применяется класс.

characterBox уже привязан к div при загрузке страницы. Однако когда я добавляю characterActive в div с jQuery, он перемещается непосредственно влево без перехода. Что я делаю не так? Любая помощь приветствуется!

.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;
}