CSS3 缩放动画关键帧答案

【问题标题】：CSS3 Scale Animation KeyframesCSS3 缩放动画关键帧
【发布时间】：2021-05-24 07:41:24
【问题描述】：

在使用 css3 动画比例、不透明度和其他东西时遇到了一些问题，但似乎无法让比例发挥作用。

sn-p:

    #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 中工作。

谢谢。

【问题讨论】：

试试@-webkit-keyframes leaves

标签： css css-animations

【解决方案1】：

我认为您忘记了关键帧中的“s”。试试@keyframes 和@-webkit-keyframes。

【讨论】：

【解决方案2】：

您只是在 keyframes 关键字中错过了 s。

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

Working demo

【讨论】：

您的“工作演示”不适用于 Firefox 或 Edge。
@DrupalFever，请立即查看。链接的图片网址已过时。