Question

请参阅：

http://codepen.io/richardstelmach/pen/RNwvyG

“svg”是html中的id。

CSS是：

#svg{
  display:block;
  max-height:400px;
  margin:0 auto;
  animation:filters 2s infinite;
}

#svg .colour1{
  fill:#2bb0b7;
}

#svg .colour2{
  fill:#ab3e41;
}

/* animate effects */

@keyframes filters {
  0%{ 
    filter:hue-rotate(0deg); 
  }
  100% { 
    filter:hue-rotate(360deg); 
  }
}

动画无效。我已经尝试将其更改为特定的-webkit- CSS，并尝试将其应用于“.colour1”类，但无效。

我也试过动画填充而不是使用hue-rotate。但同样，没有运气。

Answer 1

只需添加供应商前缀及其美观：

@keyframes filters {
  0%{ 
    -webkit-filter:hue-rotate(0deg); 
  }
  100% { 
    -webkit-filter:hue-rotate(360deg); 
  }
}

Answer 2

您还需要为过滤器添加前缀：

DEMO

@-webkit-keyframes filters {
  0%{ 
    -webkit-filter:hue-rotate(0deg); 
  }
  100% { 
    -webkit-filter:hue-rotate(360deg); 
  }
}

Answer 3

基本上需要浏览器前缀所有内容。：

#svg{
  display:block;
  max-height:400px;
  margin:0 auto;
  -webkit-animation:filters 20s infinite;
}

#svg .colour1{
  fill:#2bb0b7;
}

#svg .colour2{
  fill:#ab3e41;
}

/* animate effects */

@-webkit-keyframes filters{
  0%{ 
    -webkit-filter:hue-rotate(0deg); 
  }
  100% { 
    -webkit-filter:hue-rotate(360deg); 
  }
}

此处完成的代码：http://codepen.io/richardstelmach/pen/RNwvyG

需要为其他浏览器添加其他预修复程序。

CSS关键帧动画无法在SVG上运行

3 个答案: