css - css3をdivコンテンツと一緒にアニメーション化する方法は?

Question

アニメーションを作成しました。これがデモです。しかし、コンテンツは div と一緒にアニメーション化されません。何か提案はありますか? HTML

<div id="fdiv" align="center">
    <h1>Hello!</h1>
    <h1>Hello!</h1>
    <h1>Hello!</h1>
    <h1>Hello!</h1>
    <h1>Hello!</h1>
    <h1>Hello!</h1>
</div>

CSS

 #fdiv{
            width: 10px;
            height: 10px;
            position: absolute;
            margin-left: -5px;
            margin-top: -5px;
            left: 50%;
            top: 50%;
            background-color: red;
        }

        .go{
            -webkit-animation: spinAndZoom 1s 1;
            -webkit-animation-fill-mode: forwards;
        }

        @-webkit-keyframes spinAndZoom {
            0% {
                width: 10px; 
                height: 10px; 
                margin-left: -5px;
                margin-top: -5px;
                -webkit-transform: rotateZ(0deg);
            }
            100% {
                width: 400px;
                height: 400px;
                margin-left: -200px;
                margin-top: -200px;
                -webkit-transform: rotateZ(360deg);
            }
        }

JS

$(function(){
        $("#fdiv").delay(1000).addClass("go");
    });