CSS3比例动画关键帧(CSS3 Scale Animation Keyframes)

CSS3比例动画关键帧(CSS3 Scale Animation Keyframes)

使用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中工作。 
 
 谢谢。 
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.
                
最满意答案
                
                    
                        
 我想你忘记了关键帧中的's'。 尝试@keyframes和@ -webkit-keyframes。 
I think you forgot the 's' in keyframes. try @keyframes and @-webkit-keyframes.
CSS3比例动画关键帧(CSS3 Scale Animation Keyframes)

                
 使用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中工作。 
 
 谢谢。 
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.
                
最满意答案
                
                    
                        
 我想你忘记了关键帧中的's'。 尝试@keyframes和@ -webkit-keyframes。 
I think you forgot the 's' in keyframes. try @keyframes and @-webkit-keyframes.