SVG上的CSS动画不工作_Css_Animation_Svg

SVG上的CSS动画不工作

css animation svg

SVG上的CSS动画不工作,css,animation,svg,Css,Animation,Svg,我不熟悉使用svg代码。我正在尝试用css制作动画，我也在用波旁威士忌。什么都没发生，我也不知道为什么。有人能看到我的代码有什么问题吗它在firefox或webkit（chrome）中不起作用谢谢: <body> <svg viewBox="0 0 200 200"> <g id="chemistry"> <g id="bubbles"> <circle id="bubble1" class="liq

我不熟悉使用svg代码。我正在尝试用css制作动画，我也在用波旁威士忌。什么都没发生，我也不知道为什么。有人能看到我的代码有什么问题吗

它在firefox或webkit（chrome）中不起作用

谢谢:

 <body>
  <svg  viewBox="0 0 200 200"> 
  <g id="chemistry">
    <g id="bubbles">
        <circle id="bubble1" class="liquid" cx="54.2" cy="141.4" r="8"/>
        <circle id="bubble2" class="liquid" cx="65.2" cy="139.4" r="8"/>
            <circle id="bubble3" class="liquid" cx="77.2" cy="138.4" r="8"/>
            <circle id="bubble4" class="liquid" cx="86.2" cy="140.4" r="8"/>
        <circle id="bubble5" class="liquid" cx="97.2" cy="135.4" r="8"/>
        <circle id="bubble6" class="liquid" cx="108.2" cy="138.4" r="8"/>
        <circle id="bubble7" class="liquid" cx="117.2" cy="134.4" r="8"/>
        <circle id="bubble8" class="liquid" cx="127.2" cy="137.4" r="8"/>
        <circle id="bubble9" class="liquid" cx="136.2" cy="134.4" r="8"/>
        <circle id="bubble10" class="liquid" cx="146.2" cy="136.4" r="8"/>
     </g>
      <g id="liquid">
          <polygon class="liquid" points="176.3,181.6 22.1,180 46,139.9 147,135.7"/>
      </g>
      <g id="bottle">
          <path class="bottle" d="M188.5,171.2c4.8,7.6,5.7,14.1,2.7,19.5c-2.9,5.4-8.9,8.1-     17.9,8.1h-147c-9,0-15-2.7-17.9-8.1
            c-2.9-5.4-2-11.9,2.7-19.5L75.3,70V19.1h-8.2c-2.2,0-4.1-0.8-5.7-2.4c-1.6-1.6-2.4-3.5-2.4-5.7c0-2.2,0.8-4.1,2.4-5.7
            c1.6-1.6,3.5-2.4,5.7-2.4h65.3c2.2,0,4.1,0.8,5.7,2.4c1.6,1.6,2.4,3.5,2.4,5.7c0,2.2-0.8,4.1-2.4,5.7c-1.6,1.6-3.5,2.4-5.7,2.4
            h-8.2V70L188.5,171.2z M89,78.7L26,178.2l71.9-0.6l74.8,0.9l-62.2-99.8l-2.6-4V70V19.1H91.6V70v4.7L89,78.7z"/>
      </g>
       </g>
    </svg>
 </body>

感谢您使用以下波旁威士忌并通过sassmeister运行：

@import "bourbon/bourbon";
body {
  background: #3b3b3d;
}

svg {
  display: block;
  margin: 10% auto;
  width: 300px;
  height: 300px;
}

@include keyframes (scale) {

  0% {
   @include transform-origin(center center);
   @include transform(translateY(50px));
   @include transform(scale(1));
  }

  25% {
    @include transform(scale(1.75));
  }

  50% {
     @include transform(scale(0.5));
  }

  75% {
    @include transform(scale(1.25));
  }

  100% {
    @include transform(scale(1));
  }
}

#bubbles .liquid {
  @include animation(scale 3.0s ease-in infinite);  
}

.bottle {
  fill: #2BAAD6;
}

.liquid {
  fill: #D960EA;
}

产量：气泡在烧瓶中活动的位置。调整动画值以将效果调整为所需结果。我确实在svg的

元素中包含了一些空格。

我认为您不能像这样

包含。据我所知，目前每个供应商前缀都需要不同的关键帧声明。输出CSS是什么？。此外，scale可能是动画名称中不可用的关键字…（该名称不确定）。您可以在中设置项目并提供链接吗？您可以使用Bourbon将其包括在内。它基本上只是在元素前面加前缀。尝试在SVG上而不是在组上调用转换。仍然需要看到输出CSSThanks Jason的摆弄-这就是我在让它工作后要做的。我仍然只能看到我在safari中制作的动画和缩放。我在mac电脑上，在chrome和firefox上看到的都是静态图像。真奇怪。你用的是哪个版本的chrome和firefox？我正在用windows机器和最新的chrome和firefox进行测试。firefox和chrome都会自动更新。Chrome=33.0.1750.146 Firefox=27.0.1。好吧，至少我已经把它缩小到只有mac电脑才有问题了。再次感谢
@import "bourbon/bourbon";
body {
  background: #3b3b3d;
}

svg {
  display: block;
  margin: 10% auto;
  width: 300px;
  height: 300px;
}

@include keyframes (scale) {

  0% {
   @include transform-origin(center center);
   @include transform(translateY(50px));
   @include transform(scale(1));
  }

  25% {
    @include transform(scale(1.75));
  }

  50% {
     @include transform(scale(0.5));
  }

  75% {
    @include transform(scale(1.25));
  }

  100% {
    @include transform(scale(1));
  }
}

#bubbles .liquid {
  @include animation(scale 3.0s ease-in infinite);  
}

.bottle {
  fill: #2BAAD6;
}

.liquid {
  fill: #D960EA;
}