logo标签列表

CSS3动画无效。

csssvgcross-browsercss-animations
10

我使用 CSS3 为 SVG 创建了一段动画，它在 Chrome 和 Firefox 中运行得非常完美。在 Safari 中它只能部分工作，在支持 CSS 动画的 Internet Explorer（IE9+）中则无法工作。

查看演示

CSS：

@-webkit-keyframes dash {
  70%,80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  85% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }

  95% {
    stroke: #17739D;
    stroke-dashoffset: -301;
    stroke-opacity: 0;
  }

  100% {
    fill-opacity: 1;
    stroke-dashoffset: -301;
  }
}

@-ms-keyframes dash {
  70%,80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  85% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }

  95% {
    stroke: #17739D;
    stroke-dashoffset: -301;
    stroke-opacity: 0;
  }

  100% {
    fill-opacity: 1;
    stroke-dashoffset: -301;
  }
}

@-moz-keyframes dash {
  70%,80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  85% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }

  95% {
    stroke: #17739D;
    stroke-dashoffset: -301;
    stroke-opacity: 0;
  }

  100% {
    fill-opacity: 1;
    stroke-dashoffset: -301;
  }
}


@keyframes dash {
  70%,80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  85% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }

  95% {
    stroke: #17739D;
    stroke-dashoffset: -301;
    stroke-opacity: 0;
  }

  100% {
    fill-opacity: 1;
    stroke-dashoffset: -301;
  }
}

#Layer_1 { 
    margin-left: auto; 
    margin-right : auto;  
    top: 50%; 
    position: absolute; 
    left: 50%; 
    margin-left: -65px; 
    margin-top: -35px;   
}

svg {
  background: #fff;
  display: block;
}

svg * {
  stroke: #666;
  #stroke: #17739D;
  stroke-width: 1;
  fill-opacity: 0;
  stroke-dasharray: 350;
  stroke-dashoffset: 440;
}

svg #bp_svg * {

  -webkit-animation-name : dash;
  -moz-animation-name : dash;
  -ms-animation-name : dash;
  animation-name : dash;

  -webkit-animation-duration: 4s;
  -moz-animation-duration: 4s;
  -ms-animation-duration: 4s;
  animation-duration: 4s;

  -webkit-animation-timing-function : linear;
  -moz-animation-timing-function : linear;
  -ms-animation-timing-function : linear;
  animation-timing-function : linear;

  -webkit-animation-fill-mode : forwards;
  -moz-animation-fill-mode : forwards;
  -ms-animation-fill-mode : forwards;
  animation-fill-mode : forwards;
}

有人能帮我解决在Safari和IE上使其正常工作的问题吗？

3
我不知道你的代码出了什么问题，也不确定这些信息是否对你有帮助，但经过一个小时的破解，我成功地在IE中显示了它而没有动画效果。我修改了CSS块svg *中的fill-opacity。请查看此示例。 - Rohith
这似乎是一个理想的备选方案，因为动画只是装饰品，你真正需要看到的是蛋糕。 - misterManSam
+1 因为动画很酷 :) - Andrea Ligios
1
最简单的动画SVG的方法是使用CSS动画或过渡。缺点是它在IE中不起作用，如果您想要IE支持，您需要使用requestAnimationFrame并使用脚本逐帧更新值。 ref：http://jakearchibald.com/2013/animated-line-drawing-svg/ - Mister Epic
@ChrisHardie 发布为答案。 - Zach Saucier
3个回答
3
虽然CSS3动画在IE9中受到支持，但是SVG动画甚至在IE11中也不支持，很难确定它们是否会被支持。您可能需要依靠带有动画效果的HTML元素或使用JavaScript，虽然无法获得用于呈现CSS动画的硬件加速，但仍可能是一种可行的解决方案。
另一个想法是预先渲染并将其部署为gif格式，可以每次或只在IE中这样做。
来源：http://caniuse.com/#feat=svg-smil
3
OP并未使用SMIL动画，而是使用CSS3动画：http://caniuse.com/#feat=css-animation - commonpike
0

CSS3动画在IE9中不受支持，这就解释了为什么它在IE9中无法工作。Safari也是如此，同时提供每个浏览器的版本可能会有所帮助。请参考此支持功能列表：http://caniuse.com/css-animation

Morgan，好的，我同意它不支持IE9，但它应该适用于IE10+和Safari。 - Ahsan Khurshid
什么版本呢？你没有说Safari的版本。我在5.1.7版本中看到它部分工作。昨天我在本地重新创建了你的动画，可以发誓它在IE10中运行。我刚刚检查过，可恶！ - Morgan Feeney
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接