Анимация CSS для кастомного макета

Свойство CSS transition: 3s; для состояний div в шаблоне MyIconLayout не работает (( Без него поворот иконки идет рывками, что очень не красиво...Кто-нибудь сможет подсказать как решить это проблему? спасибо!

MyIconLayout = ymaps.templateLayoutFactory.createClass(
            '<div style="transform:rotate({{options.rotate}}deg); transition: 3s;">{% include "default#image" %}</div>'
        );

MyPlacemark = new ymaps.Placemark([52.33901161240372,42.94469719054045], {
            hintContent: 'Собственный значок метки',
            balloonContent: 'Это красивая метка'
        }, {
            // Опции.
            // Необходимо указать данный тип макета.
            iconLayout: MyIconLayout,     
            // Своё изображение иконки метки.
            iconImageHref: 'skin/myicon.png',
            // Размеры метки.
            iconImageSize: [50, 52],
            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-25, -33],
            //начальный угол поворота
            iconRotate: 0
        }); 
         myMap.geoObjects.add(RadarPlacemark);       

function set_myicon_angle(angle)
    {   
    /* alert(angle); */
         MyPlacemark .options.set({
            iconRotate: angle
        });
    }