Safari与标准动画语法

Question

我试图创建一个简单的动画，但却混淆了safari语法和标准语法。

我应该使用@-webkit-keyframes还是仅使用@-keyframes？

所以我创建了一个div，并在此基础上创建了动画

Css:

.about4 {background-color: red;-webkit-animation-name: 
aboutanimation; animation-name: aboutanimation; 
animation-duration: 4s;} @-keyframes animationname 
{from {background-color: red;} to {background-color: 
green;}}

Html:

<div class="about4">About</div>

Css-lint不会接受我使用@-keframes的语法，w3学校说它有效。动画也不起作用。

Answer 1

我认为是@keyframes而不是@-keyframeshttps://developer.mozilla.org/en-US/docs/Web/CSS/@关键帧

Answer 2

我只为不同的浏览器使用了@keyframe+autoprefixer：

@keyframes blinker {
50% {
opacity: 0;
}
} 

关于自动预混器的更多信息：https://www.npmjs.com/package/gulp-autoprefixer