Obtain background properties of element during css transition JQUERY

Obtain background properties of element during css transition JQUERY

I have an element to which I add classes to with jquery in order to
animate/carry out a CSS transition of the background property. The aim I
have is to pause the transition while it's in motion, i thought maybe I
could do this by obtaining the current background property of the element
and then setting the css to those properties obtained.
HTML
<div id="productimage">
</div>
CSS
#productimage {
-webkit-transition: all 2.5s ease-out; -moz-transition: all 2.5s
ease-out; -o-transition: all 2.5s ease-out;
}
#productimage.step2 {
background-size:1500px 2275px;
background-position: 30% 30%;
}
#productimage.step3 {
background-image: url("../img/blusen-back.jpg");
background-size:396px 600px;
-webkit-transition: all 2.5s ease-out; -moz-transition: all 2.5s
ease-out; -o-transition: all 2.5s ease-out;
}