jquery ui tabs active link css parent background transition -

i'm using jquery tabs primary navigation , i'm trying achieve css transitions parent background picture change size when button of ui tab links active. click on lets 'gallery' box-bg background animate , stay on links active.

here abit of html tabs

<div class="box-bg">     <div id="box">         <div id="tabs">             <ul class="ui-tab-block">                 <li style="height:60px; background:rgba(0,0,0,0.4);"></li>                 <li class="ui-prim-nav"><a href="#home">home</a></li>                 <li class="ui-prim-nav"><a href="#gallery">gallery</a></li>                 <li class="ui-prim-nav"><a href="#about">about</a></li>                 <li class="ui-prim-nav"><a href="#contact">contact</a></li>                 <li style="height:170px; background:rgba(0,0,0,0.4);"></li>             </ul>         </div>     </div> </div> 

my background

.box-bg{      background:url(../img/bg_placeholder.jpg) no-repeat;     background-size: 1000px 666px;     -webkit-transition: 0.1s ease-out;     -moz-transition: 0.1s ease-out;     -o-transition: 0.1s ease-out;     transition: 0.1s ease-out;      transition: background-size 2s ease-in-out;     -moz-transition: background-size 2s ease-in-out;     -web-kit-transition: background-size 2s ease-in-out;     -o-transition: background-size 2s ease-in-out; } 

my css transition

li.ui-tabs-active a:active .box-bg{     -webkit-animation-name: bg-size;     -webkit-animation-duration: 2s;     -webkit-animation-timing-function: ease-out;     -webkit-animation-delay: .5s;      -moz-animation-name: bg-size;     -moz-animation-duration: 2s;     -moz-animation-timing-function: ease-out;     -moz-animation-delay: .5s;      -o-animation-name: bg-size;     -o-animation-duration: 2s;     -o-animation-timing-function: ease-out;     -o-animation-delay: .5s; } @keyframes bg-size {   0% {       background-size:1000px 666px;   }   100% {       background-size:2000px 1333px;   } } @-webkit-keyframes bg-size {   0% {      background-size:1000px 666px;   }   100% {      background-size:2000px 1333px;   } } 

here jsfiddle of i'm doing i've scrapped css aniamtion seeing if can jquery .

sorry lot at, looking @ in advance.