Question

我做了一个动画，这里是demo。但是内容不会与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-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;
}

Updated Fiddle

Answer 2

你可以通过在webkit动画中添加font-size来获得Kilian的建议，但结果有点不稳定。

我要么使用动态创建的图像/画布来创建文本，要么只是调用损失并将overflow:hidden添加到#fdiv CSS块以消除溢出边缘的初始文本你的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 */

}

动画css3如何将div内容组合在一起？

2 个答案: