CSS動畫未應用

Question

我正在嘗試將動畫應用於SVG元素中的組。 但是，我發現它沒有應用或被覆蓋，因為它在Chrome開發者工具中被刪除了。 也就是說，我不知道是什么導致它。

動畫代碼：

.ghost {
  animation: float 3s ease infinite;
}

@keyframes float {
  50% {
     transform: translate(100px, 100px);
  }
}

我發布了HTML（問題可能存在），但由於所有的SVG路徑，它都非常冗長。 鏈接到Codepen而不是： ghost

非常感謝！ 我不知道在這一點上可能導致什么問題。

Answer 1

您錯過了供應商前綴。 例：

.ghost {
  -webkit-animation: float 3s ease infinite;
}

@-webkit-keyframes float {
  50% {
     -webkit-transform: translate(100px, 100px);
  }
}

要輕松修復，請嘗試在CodePen的CSS編輯器中添加Prefix-free 。 這里是啟用前綴免費的 ：

Codepen