CODEWITHSUNDEEP
csscss-animations
Nicholas Ritson
Nicholas Ritson

Reputation: 909

CSS3 Scale Animation Keyframes

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.

Upvotes: 17

Views: 146258

Answers (2)

Brice Lin
Brice Lin

Reputation: 560

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

Upvotes: 24

Shishir Morshed
Shishir Morshed

Reputation: 837

You just missed s in keyframes keyword.

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

Working demo

Upvotes: 16

Related Questions