I am using web-kit transitions in an iPad app. They work great. But I was wondering what I would do to change the values of my transition using javascript.

#container {
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 1s;
            -webkit-transition-timing-function: ease-out;       
        }

What I would like to do:

<script>
    function func() {
        document.getElemeentById('container').transition.duration = 500;

   }
</script>

Is this possible?

I am using web-kit transitions in an iPad app. They work great. But I was wondering what I would do to change the values of my transition using javascript.

#container {
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 1s;
            -webkit-transition-timing-function: ease-out;       
        }

What I would like to do:

<script>
    function func() {
        document.getElemeentById('container').transition.duration = 500;

   }
</script>

Is this possible?

• javascript
• ipad
• webkit
• css-transitions

2 Answers 2

Can be done with:

document.getElementById('container').style['-webkit-transition-duration'] = '500s';

See http://jsfiddle/z3bKD/2/.

Jakub's answer was good, but to update it, you can now set the transition duration directly as the transitionDuration property on an element's style. Tested and working on iOS Safari, OSX Safari, Chrome and Firefox. e.g.

document.getElementById('container').style.transitionDuration = '500s';

See http://jsfiddle/jkoudys/xa2oo1us/