Как использовать CSS анимацию?

Есть фрагмент html который хочу испльзовать в качестве placemark. 

<div class="my_mark"><svg class="bubble".... </div>

  Размер элемента изменяется через css transition 

.bubble {

    margin-top: 0;

    margin-left: 0;

    transition: width 200ms, height 200ms, margin-top 200ms, margin-left 200ms;

}

Чтобы менять css класс у placemark я вставил в шаблон выражение: 

<div class="my_mark {{ properties.extra_css_class }}">...

Анимация на карте не работает.

Размер меняется не плавно, как ожидалось, а скачком.

Вот здесь код: http://jsfiddle.net/kc4y0dvd/1/

Можно исправить?