webkit transition syntax in javascript?

Question

I'm looking for the webkitTransition object reference here

 function spawnAnimation(what){
    //sets the moving element
    var moveingEl = document.getElementById(what);
    //gives temp transition property
    moveingEl.style.WebkitTransition = "left 2s";
   // moveingEl.style.webkitTransition = "top 500ms";

   var cLeft = moveingEl.style.left
   var cleft = Number(cLeft.slice(0, -2));

    var cTop = moveingEl.style.top
   var cTop = Number(cTop.slice(0, -2));

   moveingEl.style.left = cLeft+200 + "px";

}

This does not work.I would like to give the element a transition property, then make it move to the right. When this code is called it just immediately moves to the right with no animation. bummer :(. I don't want to predefine it in CSS, I would like to dynamically add it and then remove it.

cvsguimaraes · Accepted Answer · 2021-03-04 00:52:47Z

6

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').style
const prop = (k, v) => style.setProperty(k, v)

function bounce() {
  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;  
}

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

edited Mar 4, 2021 at 0:52

answered Sep 14, 2011 at 4:50

cvsguimaraes

13.3k10 gold badges52 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Philll_t Over a year ago

That wasn't me man. Don't assume it was voted down by me just because of that comment. I appreciate your help and voted up to counter that negative, and to show my appreciation.

thomas-peter · Accepted Answer · 2012-07-26 15:48:23Z

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);

answered Jul 26, 2012 at 15:48

thomas-peter

7,9646 gold badges48 silver badges59 bronze badges

2 Comments

iHiD Over a year ago

This worked perfectly for me when trying to animate a transform with a transition. Thanks.

Petr Fiedler Over a year ago

This is not a reliable solution. You should use window.requestAnimationFrame instead.

hallodom · Accepted Answer · 2013-06-11 10:07:16Z

1

You can use:

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

answered Jun 11, 2013 at 10:07

hallodom

6,5591 gold badge25 silver badges20 bronze badges

Comments

Dhruv Dholakia · Accepted Answer · 2016-02-16 11:51:52Z

0

<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>

answered Feb 16, 2016 at 11:51

Dhruv Dholakia

232 bronze badges

Comments

BoltClock · Accepted Answer · 2011-09-29 10:51:30Z

-1

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

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

edited Sep 29, 2011 at 10:51

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

answered Sep 20, 2011 at 9:56

Simon Lang

43.2k9 gold badges53 silver badges58 bronze badges

Collectives™ on Stack Overflow

webkit transition syntax in javascript?

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related