CSS3比例动画关键帧

Question

有一些问题使用css3动画比例,不透明度和其他东西工作,但似乎无法使规模工作.

片段:

    #treeLeaves {
        background: url(https://i.pinimg.com/originals/72/c0/8e/72c08eefa235ae1c8aa72caa71eeba39.jpg);
        background-repeat:no-repeat;
        width:100%;
        height:375px;
        z-index:5;
        position:absolute;
        bottom:140px;
        left:0px;
    }

    @keyframe leaves {
        0% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
        100% {
            transform: scale(2.0);
            -webkit-transform: scale(2.0);
        }
    }

    #treeLeaves {
        animation: leaves 5s ease-in-out infinite alternate;
        -webkit-animation: leaves 5s ease-in-out infinite alternate;
    }

<div id="treeLeaves"></div>
<div class="leaves">

基本上它的1 img,我想随着时间的推移不断扩大和缩小.只使用webkit,因为它只需要在chrome中工作.

谢谢.

Answer 1

我想你忘记了关键帧中的's'.尝试@keyframes和@ -webkit-keyframes.

Answer 2

您刚刚错过s了keyframes关键字。

@keyframes leaves {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(2.0);
    }
}

工作演示