Webkit Transition Syntax In Javascript?

I'm looking for the webkitTransition object reference here function spawnAnimation(what){ //sets the moving element var moveingEl = document.getElementById(what); //g

Solution 1:

You can use style.setProperty to modify any property using its CSS name as string, including -moz-* and -webkit-* properties.

const style =  document.getElementById('my-div').styleconstprop = (k, v) => style.setProperty(k, v)

functionbounce() {
  prop("-webkit-transition", "top .5s ease-in");
  prop("top", "50px");
  setTimeout(() => {
    prop("-webkit-transition", "top .75s cubic-bezier(0.390, 0.575, 0.565, 1.000)");
    prop("top", "0px");
  }, .5 * 1000)
}

prop("-webkit-transition", "top .5s ease-in");
setInterval(bounce, (.75 + .5) * 1000);

#my-div {
  background: red;
  border-radius: 50%;
  width:50px;
  height:50px;
  position:absolute;
  top: 0px;  
}

<divid="my-div"></div>

Solution 2:

Allow 1ms for the rendered to get the thread back.

setTimeout(function() {
    myElement.style.height = '200px'; /* or whatever css changes you want to do */
}, 1);​

Solution 3:

You can use:

element.style.webkitTransition = "set your transition up here"

Solution 4:

I know it's a workaround, but can you use jQuery?

$(moveingEl).css('-webkit-transform', 'translateX(200px)');

Solution 5:

<script>
        $(document).ready(function(){

                var x = 100;
                var y = 0;
            setInterval(function(){
                x += 1;
                y += 1;
                var element = document.getElementById('cube');
                element.style.webkitTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for safari and chrome
                element.style.MozTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for firefox
            },50);
            //for other browsers use:   "msTransform",    "OTransform",    "transform"

        });
    </script>