CSS3 缩放动画关键帧

Question

having a few issues using css3 animation scale, opacity and other things work but cant seem to get scale to work.

snippet:

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

basically its 1 img that i wanted to scale up and down constantly over time. only using webkit because it only needs to work in chrome.

thanks.

Answer 1

I think you forgot the 's' in keyframes. try @keyframes and @-webkit-keyframes.

Answer 2

You just missed s in keyframes keyword.

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

Working demo

Answer 3

having a few issues using css3 animation scale, opacity and other things work but cant seem to get scale to work.

snippet:

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

basically its 1 img that i wanted to scale up and down constantly over time. only using webkit because it only needs to work in chrome.

thanks.