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");
    });

Answer 1

您可以通过添加font-size到 webkit 动画中来接受 Kilian 的建议，但结果有点生涩。

我要么使用动态创建的图像/画布来创建文本，要么简单地调用你的损失并添加overflow:hidden到#fdivCSS 块中以摆脱溢出到你的 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 */

}

Answer 2

没有动画是指内容的大小？然后添加font-size到您的动画中。

@-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;
    }
}

正如 shennan 提到的，font-size 的动画大部分时间有点生涩。我已经添加ease-in到动画中，使它在最后看起来不那么生涩。

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

更新小提琴