How animate css3 with div content together? - css

Question

I made a animation and here is the demo.
But the contents won't animate with the div together, any suggestions?
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");
});

Answer 1

With not animating you mean the size of the content? Then add font-size to your animation.
#-webkit-keyframes spinAndZoom {
0% {
width: 10px;
height: 10px;
margin-left: -5px;
margin-top: -5px;
-webkit-transform: rotateZ(0deg);
font-size: 0;
}
100% {
width: 400px;
height: 400px;
margin-left: -200px;
margin-top: -200px;
-webkit-transform: rotateZ(360deg);
font-size: 16px;
}
}
As shennan mentioned, the animation of font-size is most of the time a bit jerky.
I've added ease-in to the animation, to make it appear less jerky at the end.
.go {
-webkit-animation: spinAndZoom 1s 1 ease-in;
-webkit-animation-fill-mode: forwards;
}
Updated Fiddle

Answer 2

You can go with Kilian's suggestion by adding font-size to the webkit animation, but the results are a little jerky.
I would either use a dynamically created image/canvas to create the text, or simply call your losses and add overflow:hidden to the #fdiv CSS block to get rid of the initial text spilling over the edge of your div:
#fdiv{
width: 10px;
height: 10px;
position: absolute;
margin-left: -5px;
margin-top: -5px;
left: 50%;
top: 50%;
background-color: red;
overflow:hidden; /* here is your eureka fix */
}