Question

I am using CSS3 Transitions, and I am wondering if once the animation is started with:

-webkit-transform: translate3d(-100%, 0, 0);

Can I somehow increase the speed which was pre-set using:

-webkit-transition: all 10s linear;

I want the speed to be 2s using jQuery.

Answer 1

It appears you can with this.style["-webkit-transition"]

http://jsfiddle.net/X5shh/

HTML

<div class="one"></div>

CSS

.one
{
    -webkit-transition: all 10s linear;
    width:200px;
    height:20px;
    background:green;
}
.two
{
    -webkit-transform: translate3d(100%, 0, 0);
}

jQuery

$("div").click(function(){
    $(this).toggleClass("two");
    this.style["-webkit-transition"] = "all 2s linear"
});

EDIT

or

this.style["-webkit-transition-duration"] = "2s";