jquery - How to scale div using css animation in javascript -

i trying apply scale animation when javascript function called. not able that. here have div contains data inside it. div hidden , flip function should scale div. scaling not happening through javascript function.how can this?

here have tried.

function flip1(){     $('#category-1').delay(100).css('display', 'none');     $('.box-1').delay(100).css('display', 'block');     $('.box-1').transition({         perspective: '100px',         rotatey: '360deg'           width: 100px;         height: 100px;         background: red;         -webkit-transition: transform 0.3s;         transform:scalex(1);         animation-name: example;         animation-duration: 0.3s;         }      @keyframes example {         25%  {transform:scalex(0.060);}         50%  {transform:scalex(0.500);}         75%  {transform:scalex(0.700);}         100% {transform:scalex(1);}     }            },200)       settimeout(startslidecat1, 2000);   } 

write css class transition , on click add class required div

div {     width: 100px;     height: 100px;     background: red;     -webkit-transition: width 2s;      transition: width 2s; }  .scale-it {     width: 300px; }   $('#divid').addclass('scale-it'); 

*