一个最简单的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> 展开
<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(财富值+成长值)
展开全部
这样改一下就好
@-webkit-keyframes wave
{
from{-webkit-transform:rotate(30deg)}
to{-webkit-transform:rotate(300deg)}
}
追问
果然实现了。我那另外几个@keyframes是不是也应该写成这种带前缀的?我用其他几个浏览器试没问题是因为它们已经兼容不带前缀的写法了吧?
追答
对,针对一些属性必须加上浏览器私有属性才能被识别,而每种浏览器可识别的属性会有不同,因此就目前而言,每个css3属性上分别加上各自的私有属性是有必要的。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
可能不支持吧 你查查看是不是
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询