Question

我正在尝试向SVG圈添加纹波/声纳脉冲类型的动画，但它没有做任何事情。这是一个显示问题的小提琴：http://jsfiddle.net/scole/ono0awyw/

在小提琴中，所需效果适用于屏幕中心的空div元素，但将相同的CSS动画类应用于SVG圈则不起作用。是否无法为盒子阴影更改设置动画？

我真的希望将解决方案作为CSS类的应用程序保存到SVG元素中。

谢谢！史蒂夫

我不能在没有代码的情况下发布Fiddle链接，所以这里是动画所基于的CSS类：

.ripple,.ripple:before,.ripple:after {
  display:block;
  border-radius:2px;
  margin:0 auto;
  width:2px;
  height:2px;
  -webkit-animation:rip 2s infinite;
  -moz-animation:rip 2s infinite;
}
.ripple {
  position:absolute;
  z-index:1000;
  top:10px;
  left:15px;
}
.ripple:before,.ripple:after {
  content:'';
  position:absolute;
}
.ripple:before {-webkit-animation-delay:.1s;-moz-animation-delay:.2s;top:5px;left:0px;}
.ripple:after {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;top:5px;left:0;}
@-webkit-keyframes rip 
{
  0%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }
  5%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 rgba(255,0,0,0.5),
               0 0 0 0 transparent,
               0 0 0 0 rgba(0,0,0,0.1);
  }
  100% {
    box-shadow:0 0 40px 50px transparent,
               0 0 10px 60px transparent,
               0 0 30px 70px transparent,
               0 0 5px 80px transparent;
  }
}
@-moz-keyframes rip 
{
  0%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }
  5%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 rgba(255,0,0,0.5),
               0 0 0 0 transparent,
               0 0 0 0 rgba(0,0,0,0.1);
  }
  100% {
    box-shadow:0 0 10px 75px transparent,
               0 0 20px 75px transparent,
               0 0 30px 75px transparent,
               0 0 40px 75px transparent;
  }
}

Answer 1

您的动画无效，因为您无法在::before等SVG元素上使用CSS伪元素（::after和<circle>）。它们仅适用于HTML元素。

SVG Circle和box-shadow动画有问题

1 个答案: