jquery webkit forwards animation

Question

Hi im trying to make zoom in animation on Onclick function but i cant manage to set the timer on forwards animation. Anyone can help? My code:

$(document).ready(function(){

$('#menu-button').click(function(){

$('#bkg').css({ ' -webkit-animation': 'in 10s forwards',
'-webkit-transform' : 'scale(' + 1.05 + ')',

});

}); });

Scalling works but not the first line.

Answer 1

I am not sure how to use both animation and transition at the same time. But I think the following idea may help you.

jQuery Part

$(document).ready(function(){
    $('#menu-button').click(function(){
         $('#bkg').addClass('scalenew');
});});

CSS Part

#menu-button {
    width:100px;
    height:50px;
    background:red;
}
#bkg {
    top:10px;
    left:10px;
    width:100px;
    height:100px; 
    background-color:#00ff00;
    transition: 10s forwards;
}

#bkg.scalenew {
     -webkit-transform: scale(1.5)
}