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編輯器。這是無前綴啓用：

Codepen