一个最简单的CSS3动画，为什么唯独在Safari中不动呢？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div
{
height:100px;
width:100px;
background:red;
animation:wave 5s infinite;
-moz-animation:wave 5s infinite;
-o-animation:wave 5s infinite;
-webkit-animation:wave 5s infinite;
}
@keyframes wave
{
from{transform:rotate(30deg)}
to{transform:rotate(300deg)}
}
@-moz-keyframes wave
{
from{transform:rotate(30deg)}
to{transform:rotate(300deg)}
}
@-o-keyframes wave
{
from{transform:rotate(30deg)}
to{transform:rotate(300deg)}
}
@-webkit-keyframes wave
{
from{transform:rotate(30deg)}
to{transform:rotate(300deg)}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这样改一下就好
@-webkit-keyframes wave{
from{-webkit-transform:rotate(30deg)}
to{-webkit-transform:rotate(300deg)}
}追问
果然实现了。我那另外几个@keyframes是不是也应该写成这种带前缀的？我用其他几个浏览器试没问题是因为它们已经兼容不带前缀的写法了吧？
追答对，针对一些属性必须加上浏览器私有属性才能被识别，而每种浏览器可识别的属性会有不同，因此就目前而言，每个css3属性上分别加上各自的私有属性是有必要的。
本回答被提问者和网友采纳