Как обращаться к @keyframes в jQuery?

Question

[vohaha]

Нужно изменять width в keyframes при изменении js-переменной "counter".
Есть код в css

...
@-webkit-keyframes progress { 
    from { }

    to { width: 100% }
}

@-moz-keyframes progress { 
    from { }

    to { width: 36% }
}

@-ms-keyframes progress { 
    from { }

    to { width: 36% }
}

@keyframes progress { 
    from { }

    to { width: 36% }
}
...

И есть код js

$(document).ready(function() {
        $('.b-inputForm__button').data('counter', 1).click(function() {
            var counter=$(this).data('counter');
            $(this).data('counter', counter+1);
            $('.b-progressbar__title').html(counter+" из 10");
            var toAdd = $('.b-inputForm_textArea').val();
            if (counter===10){$('.b-inputForm__button').attr('disabled',true)}
            $('.b-names__string').append(toAdd + ", ");
        });
});

Answer 1

[Евгений Петров]

Правильный подход — менять в JS только классы. Менять правила с помощью атрибута style нужно в крайнем случае. А в случае с animation это вообще невозможно — анимация, как и любое @rule, описывается отдельно от элементов.

Если нужно создать много правил, основываясь на данных, которые появятся только в скрипте, используем insertRule у объекта из коллекции document.styleSheets. В этих правилах вы сформируете имена animation и привяжете их к классам.

Вот примерно так codepen.io/cleric/pen/FqIaD
Причём тут я пошёл на поводу простоты и вместо классов оперирую атрибутом style. Но в боевых условиях я бы подумал 10 раз — могут меняться и другие параметры (продолжительность и прочее).

Comments

[vohaha]

there is nothing here, Monsieur

[vohaha]

Большое спасибо за помощь, но по ссылке ничего нет.

[Евгений Петров]

@vohaha странно скопировалась ссылка, аж неожиданно. codepen.io/cleric/pen/FqIaD

[Евгений Петров]

@vohaha тостер точку внёс внутрь ссылки

[Евгений Руденко]

упомянули меня в ответе :-)

Answer 2

[barkalov]

related:
Stack Overflow: css - Set Webkit Keyframes Values ...
jsFilddle