web-dev-qa-db-ja.com

CSS3スケールアニメーションキーフレーム

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">

基本的に、私が時間の経過とともに絶えずスケールアップおよびスケールダウンしたかったその1img。 Chromeでのみ機能する必要があるため、webkitのみを使用します。

ありがとう。

csscss-animations
4
Nicholas Ritson

キーフレームの「s」を忘れたと思います。 @keyframesと@ -webkit-keyframesを試してください。

8
Brice Lin

sキーワードでkeyframesを見逃しました。

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

作業デモ

4
Shishir Morshed
@-webkit-keyframes scaling {
From {
    -webkit-transform: scale(1.0);
}
To {
    -webkit-transform: scale(2.0);
}

#treeLeaves {
-webkit-animation: scaling 5s infinite alternate;
}
0
Lanvin Kgoale