Entregar html à @keyframe css

[Carlos Rocha]

como eu consigo fazer isso?

Tenho o seguinte código com o objetivo de adicionar propriedades ao `@keyframe tocaSlide`

    $("<style> @keyframes tocaSlide").html(texto);

A variável texto tem o seguinte conteúdo

    0% { margin-left:-0%};
    25% { margin-left:-0%};
    30% { margin-left:-100%};
    50% { margin-left:-100%};
    55% { margin-left:-200%};
    75% { margin-left:-200%};
    80% { margin-left:-300%};
    100% { margin-left:-300%};

ficou assim:

    texto = "0% { margin-left:-0%};";
    texto += "25% { margin-left:-0%};";
    texto += "30% { margin-left:-100%};";
    texto += "50% { margin-left:-100%};";
    texto += "55% { margin-left:-200%};";
    texto += "75% { margin-left:-200%};";
    texto += "80% { margin-left:-300%};";
    texto += "100% { margin-left:-300%};"

Nenhum erro no console mas o @keyframe não está recebendo o html

Também tentei com:

     var supportedFlag = $.keyframe.isSupported();
    
     $.keyframe.define([{
       name: 'tocaSlide',
       texto
     }]);      

Mas também não funcionou.

e uma nova tentativa:
    

    $("div.slider ul.slide").playKeyframe(
        texto
    );

Também não funcionou.

 

Alguém pode me ajudar