SVG動畫使用CSS不起作用

Question

我新的SVG，並試圖在this銷

動畫不工作的兩個圓的動畫，我認爲有一個與我的代碼的問題。

SVG

<svg xmlns="http://www.w3.org/2000/svg"> 
    <rect height="60" width="100" fill="#B32317" rx="10" ry="10"></rect> 
    <g class="eyes"> 
     <circle class="c1" cx="25" cy="20" r="10" fill="#fff"></circle> 
     <circle class="c1" cx="75" cy="20" r="10" fill="#fff"></circle> 
     <circle cx="25" cy="20" r="7" fill="#B32317"></circle> 
     <circle cx="75" cy="20" r="7" fill="#B32317"></circle> 
    </g> 
</svg> 

CSS

.c1 { 
    -webkit-animation-name: scaleme; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-direction: alternate; 

    animation-name: scaleme; 
    animation-duration: 3s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out; 
    animation-direction: alternate; 
} 

@-webkit-keyframes scaleme { 
    transform: scale(1.1) translate(5px,0); 
} 

任何幫助嗎？

感謝，

Answer 1

你的關鍵幀應該這樣寫這樣

@-webkit-keyframes scaleme { 
    0% { transform: scale(1) translate(0,0); } 
    100% { transform: scale(1.1) translate(5px,0); } 
} 

@keyframes scaleme { 
    0% { transform: scale(1) translate(0,0); } 
    100% { transform: scale(1.1) translate(5px,0); } 
} 

叉：http://codepen.io/anon/pen/HaBmd

Answer 2

@keyframes scaleme { 
    0% { 
    transform: scale(1.1) translate(5px,0);  
    }, 
    100% { 
    transform: scale(1.0) translate(0px,0); 
    } 

}