jquery - Get CSS property of element in transition / Pause CSS3 transition -

i'm trying pause css3 transition, element in question maintains it's exact css properties when pause button clicked. way think going getting css properties of element during transition , setting them .css(), work? how css properties of element during transition.

html

 <div id="productimage">            </div> <a href="#" id="pause">pause</a> 

css

    #productimage {         position:absolute;         height: 550px;         width: 393px;         background-image: url("../img/blusen.jpg");         background-repeat:no-repeat;         background-position:50% 50%;         background-color: #fff;         background-size:396px 600px;         top:191px;         left:10px;     }   #productimage.step1 {     background-size:1500px 2275px;     -webkit-transition: 2.5s ease-in-out; -moz-transition: 2.5s ease-in-out; -o-transition: 2.5s ease-in-out; } 

jquery

$("#pause").click(function(e) {          e.preventdefault();         $('#productimage').addclass('step1'); } 

you can pause transition copying attributes changed transition, setting attributes changed attributes, , removing class animates it. of course if using same object animate/pause need animate first click pause next click.

note: !important in css background-size attribute necessary unless have more leveled selector animation class jquery selector, aka div #productimage.step1 { opposed #productimage.step1 {. since #productimage , #productimage.step1 both 1 level, example requires !important

i took approach , came this example jsfiddle

/* jquery */ var image = $("#productimage"); $("#pause").click(function (e) {     e.preventdefault();     if(!image.hasclass('step1'))     {         image.addclass('step1');     }     else {         var css = image.css("background-size"); // changed attribute(s)         image.css({'background-size': css}); // set changed attribute(s)         image.removeclass('step1');     } });  /* changed css */ #productimage.step1 {     -webkit-transition: 2.5s ease-in-out;     -moz-transition: 2.5s ease-in-out;     -o-transition: 2.5s ease-in-out;     background-size:1500px 2275px !important;     }