flip and grow animation in jquery

Question

I need to make a page that looks like a deck of cards. On click of a card, the card flips and it shows details about it. I have implemented the flip animation using jquery. But i need to flip and grow the card since the details have large content. The animation that I have done till now is a bit too jerky. This is what I have done till now:

HTML:

<div class="flipbox-container0">
    <div class="flipbox0" onclick="flip()"> <span class="spans">Maturity Date</span>

    </div>
</div>
<div id="text1" style="display:none">
    <p style="margin-left:-2.25%; width:100%; background-color:#D5E04E; padding-bottom:10px; padding-left:22px; padding-top:10px;">Maturity Date</p>
    <p>Close</p>
    <p>A bond’s maturity date refers to a specific date in the future on which the investor’s principal will be repaid. Maturities can range from as little as one day to as long as 30 years. The length of a bond’s maturity often correlates to the bond’s risk factor. A bond that matures in one year will typically be less risky than one that matures in 20 years since there will be less price fluctuation in shorter maturities.
        <br />
        <br />Bonds are often referred to as being short-, medium- or long-term. Generally, a bond that matures in one to three years is referred to as a short-term bond, while medium-term bonds are generally those that mature in four to 10 years. Long-term bonds are typically those that mature in more than 10 years.
        <br />
        <br />Once the bond’s maturity is reached, the final interest payment and the original principal are paid to the investor.
    </p>
</div>

Javascript:

function flip()
{
    $(".flipbox0").flippy({
        color_target: "white",
        duration: "300",
        onMidway : function(){
            $(".flipbox0").width(500);
            $(".flipbox0").height(500);
            $(".flipbox1").hide();
            $(".flipbox2").hide();
            $(".flipbox3").hide();
            $("#text1").show();
        }
    });
}

CSS:

.flipbox0 {
    -webkit-transform: rotateY(0deg);
    opacity: 1;
    background-color: #D5E04E;
    background-position: initial initial;
    background-repeat: initial initial;
    width:250px;
    height:300px;
    border:3px solid #FF9900;
    border-radius:25px;
    z-index:1;
}
.spans {
    margin-left: 0%;
    margin-top: 80%;
    position: absolute;
    background-color: #FFF;
    top: -23%;
    width: 100%;
    text-align: center;
}
#text1 {
    margin-top: -35%;
    z-index: 2;
    position: absolute;
    width: 35%;
    margin-left: 1%;
    text-align: justify;
}

Any help would be appreciated. Thanks in advance.