CSS3 动画不起作用

Posted 2023-03-06

【中文标题】CSS3 动画不起作用

【英文标题】：CSS3 animation is not working

【发布时间】：2014-08-09 18:09:04

【问题描述】：

我使用 css3 为 SVG 创建了一个动画，该动画在 Chrome 和 Firefox 中运行良好。它在 Safari 中部分工作，但在 Internet Explorer（支持 css 动画的 IE9+）中不工作

See Demo

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 中也能正常工作？

【问题讨论】：

我不知道你的代码有什么问题或者这些信息是否对你有帮助，但是在破解你的代码一个小时后，我可以在 IE 中显示它而不显示动画。我更改了 CSS 块 svg * 中的 fill-opacity。检查这个fiddle

这似乎是一个理想的后备方案，因为动画是锦上添花，你真的只需要看看蛋糕。

+1 因为动画很酷:)

"动画 SVG 最简单的方法是使用 CSS 动画或过渡。缺点是它在 IE 中不起作用，如果你想要 IE 支持，你需要使用 requestAnimationFrame 并更新值帧按框架和脚本。”参考：jakearchibald.com/2013/animated-line-drawing-svg

@ChrisHardie 发布答案

【参考方案1】：

虽然 IE9 支持 CSS3 动画，但 IE11 甚至不支持 SVG 动画，而且很难判断它们是否会支持。您可能不得不依赖动画 html 元素或使用 javascript，这不会从用于渲染 CSS 动画的硬件加速中受益，但仍然可能是一个可行的解决方案。

另一个想法是预渲染它并将其部署为 gif，每次或仅在 IE 中。

来源：http://caniuse.com/#feat=svg-smil

【讨论】：

虽然 OP 没有使用 SMIL 动画，但 css3 动画：caniuse.com/#feat=css-animation

【参考方案2】：

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

【讨论】：

摩根，好的，我同意它在 IE9 中不受支持，但它应该适用于 IE10+ 和 safari

什么版本？你不是说什么版本的 Safari。我看到它在 5.1.7 版中部分工作。我昨天在本地重新创建了你的动画，并且可以发誓它在 IE10 中工作。刚刚检查过，哦！

【参考方案3】：

我建议使用 raphaeljs javascript 库。它在动画 svg 方面具有很强的能力。

Raphael 目前支持 Chrome 5.0+ Firefox 3.0+、Safari 3.0+、 Opera 9.5+ 和 Internet Explorer 6.0+

http://raphaeljs.com/

http://raphaeljs.com/playground.html - 快速预览。