2

I can produce 

-webkit-animation-name:mymove;

dynamically with 

object.style.animationName="mymove"

but is it possible to generate something like

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

dynamically with JS?

nuway
  • 2,324
  • 4
  • 27
  • 48

5 Answers5

4

Yes, i use Jquery library and then apply like so:

Say in this situation i want the left value to be dynamic from a div with attribute class value = "push"

<!--HTML-->
<div class="push">Wall</div>

//--JS--
var KeyFrame =
{
 init: function(){
   if(!KeyFrame.check)
   {
     //get the left position
     var pushLeft = $('.push').position().left;
     //set the style and append to head
     var css = $('<style>@keyframes mymove{from {left:0px;}to {left:'+pushLeft+'px;}}</style>').appendTo('head'); //make sure you don't carriage return the css inline statement, or else it'll be error as ILLEGAL
     //so u don't keep appending style to head
     KeyFrame.check = true;
   }
  }
}
KeyFrame.init();
AFwcxx
  • 467
  • 1
  • 4
  • 15
3

Consider the idea of how to access the styleSheet...

document.styleSheets[0].insertRule(animationRule)

It's certainly going to be complicated to do well, so briefly you'd want to retain a link and alter the rule associated with each object or something to avoid clutter. Or you could try to run a form of garbage collection with time stamps or something to figure out when the old ones can be removed.

From a quick look for other links I found... http://davidwalsh.name/add-rules-stylesheets

deleteRule

http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/deleteRule

insertRule (addRule precedes and is therefore more reliable)

http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule

I'm also just now noting something else that might be useful...

http://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule

Actually this looks like a better cleaner understanding or at least another way.

http://blog.joelambert.co.uk/2011/09/07/accessing-modifying-css3-animations-with-javascript/

MistereeDevlord
  • 876
  • 7
  • 10
1

Okay so if I am understanding correctly this jsfiddle should do the trick.

It uses a pre-defined set of transition properties, and changes the values dynamically via jquery.

The syntax for defining these animations is as follows...

transition-property: prop1, prop2, prop3;
transition-duration: timing1, timing2, timing3;
transition-timing-function: ease1, ease2, ease3;

By doing this, you can achieve nearly everything you can with @keyframes (not quite everything, but certainly a fair amount), it just happens to be built into the element style. From here you can go on to change whatever you want via jquery. If its the amount to move you can doing something like...

$("#myElem").css("left", "50px");

and the css3 transition will take care of the rest. If it's something like changing the ease type you can do that too with...

$("#myElem").css("transition-timing-function", "linear");

I know this is not exactly what you were looking for, but chances are it will do the trick.

Atlas Wegman
  • 569
  • 2
  • 10
  • thanks but i am particularly interested in generating the @keyframes part – nuway Apr 26 '13 at 02:46
  • Ah okay, maybe this answer can help then? http://stackoverflow.com/questions/10342494/set-webkit-keyframes-values-using-javascript-variable – Atlas Wegman Apr 26 '13 at 02:51
0

It looks as if you have an understanding of css3 keyframes. I recommend jQuery.Keyframes to generate keyframes, you can also attach events and callbacks to the animations.

Jake Cattrall
  • 461
  • 4
  • 20
0

Yes you can, when you write your javascript code, you use the setAttribute() function vs the style() so that you can include more than one type of style. Just insert the animation-name, animation-duration, animation-timing-function or any other types that you wish.

<!DOCTYPE html>
<html>
<head>
<title> Welcome </title>
<meta charset = "utf-8">

<style>
@keyframes appear-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }

}

#landing-page {
    width: 100%;
    height: 1000px;
}

</style>

 <script>
     window.addEventListener('load', function(){setTimeout(renderService, 1000)});
     function renderService(){
        var server = document.getElementById('Services');
        server.setAttribute("style", "animation-name: appear-in; animation-duration: 5s; animation-timing-function: ease-in; background-image: url('https://wallpaperaccess.com/full/949819.jpg'); background-size: 80% 100%; background-position: center");
     }

 </script>   

</head>

<body>
<div id = "landing-page">

</div>

</body>
</html>
darrell
  • 63
  • 1
  • 4
  • This posted is with just regular javascript or vanillaJS as they call it. I used an event listener to render it in a certain time frame make it appear in rather than just showing up without any control over it. – darrell Jul 12 '19 at 17:22