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

Question

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

然而，此示例的工作方式与 Chrome 中的完全一样，但是当我在我的网站上实施代码时，它并没有运行代码。然而它在 Firefox 中工作得很好。当我检查 Chrome 中的元素时，它会在动画属性中插入一条线并显示一条错误消息 'Invalid property value'。然而，当我看这个例子时，我做了同样的事情，但没有得到同样的错误。

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

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

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;
  }
}

Answer 1

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

例如，在 Codepen 上您会看到：

animation-name: show;

而不是：

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

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

CSS3 animation not running in Chrome on MY site

css

google-chrome

sass