Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 Transitions Speed at Runtime

CSS3 Transitions Speed at Runtime

Problem

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.

Problem courtesy of: Neutralizer

Solution

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

http://jsfiddle.net/X5shh/

HTML

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";
Solution courtesy of: Joseph Marikle

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 Transitions Speed at Runtime

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×