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); 
    } 

}