Home » Javascript » guive html to keyframe css

guive html to keyframe css

Posted by: admin November 1, 2017 Leave a comment

Questions:

I have follow function:

      $.keyframe.define([{
          name: 'playSlide',
          tMin : {'margin-left': "0"},
          tMax : {'margin-left': "0"},
      }]);    

But i need make it:

      $.keyframe.define([{
          name: 'playSlide',              
          content: variable
      }]);    

This variable is text

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

Is it possible?

Maybe of other form:

$("<style> @keyframes playSlide").html(text2);

Ou maybe:

   $("animation playSlide").html(text2);

with: text2 variable below

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

I can not do it

Nothing works

Answers: