Add Css animation duration dynamically

Question

I am trying to add flip effect for divs using css CodePen Example

But the change will be that I will be trying to add the css animation dynamically through javascript.

Here is what I have tried. The transform propery seems to be working, but the animation duration to see the animation happening is not working. Any suggestions on that part. am i adding the correctly?

            $('body').html('<div class="card-container"><div id = "myDiv" class="flipper"><div class="front"> <h1>Hello</h1></div><div id="backDiv" class="back"> <h1>World</h1></div></div></div>');



            document.getElementById("myDiv").style.transform = "rotateX(360deg)"
            document.getElementById("myDiv").style.WebkitTransform = "rotateX(360deg)"
            document.getElementById("myDiv").style.msTransform = "rotateX(360deg)";
            document.getElementById("backDiv").style.transform =  'rotateX(180deg)';

            document.getElementById("myDiv").style.transition = 'transform 6s ease-out'

https://jsfiddle.net/Lsvwyx0c/

what do you mean is not working ? on your script it is 6 seconds while on the CSS it is 0.6 seconds. is that the problem ? — Gabriele Petrioli, Jan 17 '17 at 19:36

score 1 · Accepted Answer · answered Jan 17 '17 at 20:33

You are creating the elements and changing their properties at the same time. There is no change to be transitioned.

For a transition to work, you need that the browser has the elements rendered, and then modify them to a new value.

A delay, even a short one, will be enough:

function change()  {

    document.getElementById("myDiv").style.WebkitTransform = "rotateX(360deg)"
    document.getElementById("myDiv").style.msTransform = "rotateX(360deg)";
    document.getElementById("myDiv").style.transform = "rotateX(360deg)";
    document.getElementById("backDiv").style.transform =  'rotateX(180deg)';
    document.getElementById("myDiv").style.transition = 'transform 6s ease-out'
};                

window.setTimeout (change, 5);

fiddle

Add Css animation duration dynamically

1 Answers1