一个最简单的CSS3动画,为什么唯独在Safari中不动呢?

<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Conten... <!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>
展开
 我来答
  • 你的回答被采纳后将获得:
  • 系统奖励15(财富值+成长值)+难题奖励10(财富值+成长值)+提问者悬赏20(财富值+成长值)
fhq198604
2015-02-26 · TA获得超过805个赞
知道小有建树答主
回答量:236
采纳率:100%
帮助的人:370万
展开全部

这样改一下就好

@-webkit-keyframes wave
{
        from{-webkit-transform:rotate(30deg)}
        to{-webkit-transform:rotate(300deg)}
}
追问
果然实现了。我那另外几个@keyframes是不是也应该写成这种带前缀的?我用其他几个浏览器试没问题是因为它们已经兼容不带前缀的写法了吧?
追答
对,针对一些属性必须加上浏览器私有属性才能被识别,而每种浏览器可识别的属性会有不同,因此就目前而言,每个css3属性上分别加上各自的私有属性是有必要的。
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
309961063
2015-02-26 · 超过31用户采纳过TA的回答
知道答主
回答量:152
采纳率:0%
帮助的人:42.8万
展开全部
可能不支持吧 你查查看是不是
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式