使用 CSS 的 SVG 动画不起作用答案

【问题标题】：SVG animation using CSS doesn't work使用 CSS 的 SVG 动画不起作用
【发布时间】：2014-11-06 16:33:03
【问题描述】：

我是 SVG 新手，正在尝试为this pin 中的两个圆圈制作动画

动画不起作用，我认为我的代码有问题。

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

有什么帮助吗？

谢谢，

【问题讨论】：

标签： css animation svg css-animations

【解决方案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

【讨论】：

【解决方案2】：

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

}

【讨论】：