CSS3动画未在我的网站上的Chrome中运行

我正在尝试用CSS3制作SVG动画。你可以在这里看到一个例子-

然而，这个例子在Chrome中的工作原理和它应该的一样，但是当我在我的站点上实现代码时，它不会运行代码。然而，它在Firefox中工作得非常好。当我检查Chrome中的元素时，它会在动画属性中画一条线，并显示一个错误，说“属性值无效”。然而，当我看这个例子时，我做了同样的事情，我没有得到同样的错误

我有点困惑，我已经调试了一段时间了。它不可能是我的Chrome版本（39.0.2171.95M版）

虽然经过一些小的修改后，我的代码几乎完全相同，但下面是我的代码片段：

img {
  max-width: 80%;
  width: 100%;
  //position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  animation-name: show;
  animation-delay: 6s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

svg {
  max-width: 80%;
  width: 100%;
  //position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  path {
    stroke-width: 2;
    stroke: black;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-name: draw;
    animation-timing-function: linear;
    animation-duration: 3s;
    &.bird {
      stroke: black;
      stroke-dasharray: 2810;
      stroke-dashoffset: 2810;

    }

  }
}


}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes show {
  to {
    opacity: 1;
  }
}

---

您已经在Codepen上启用了无前缀模式。它允许您在任何地方都只使用未固定的CSS属性。它在后台工作，只在需要时才将当前浏览器的前缀添加到任何CSS代码中

例如，在Codepen上，您将看到：

animation-name: show;

而不是：

animation-name: show;
-webkit-animation-name: show;
-moz-animation-name: show;

---

codepen在代码中使用默认前缀add-webkit-谢谢您的快速响应。你是说它很可能是Chrome的版本吗？似乎工作正常，不是很顺利。但它在做些什么。谢谢。你注意到你已经在Codepen上启用了前缀，对吗？@JoshDavies是的，所有Chrome版本仍然需要该属性的前缀。谢谢！很高兴知道，正如前面提到的，我并没有真正使用Codepen。