0

welp .. 我曾经有在我的谷歌浏览器上运行的 css3 动画，但由于某种原因它停止了工作。我试图根据该代码创建一个示例。

我不知道为什么它不再起作用了..任何信息将不胜感激。

<html>
<head>
<style type="text/css">
div
{
 width:100px;
 height:100px;
 background:red;
 -webkit-transition: all .5s ease;
 -webkit-animation-name: bounceup;
 -webkit-animation-duration: 1.5s;
}

@-webkit-keyframes bounceup {
    from {
    opacity:0.5;
    -webkit-transform: translateY(100px) rotate(180deg);
    -webkit-box-shadow: 20px 20px 80px #000;
    }
    to {
    opacity:1;
    -webkit-transform: translateY(0px) rotate(0deg);
    }
}


</style>
</head>
<body>

<div></div>

</body>
</html>

正如你所看到的，它是一个使用“from”和to“方法的基于关键帧的动画。

这里的结果是我只看到一个没有动画的红色框。

谢谢！

4

1 回答 1

1

由于某种原因，动画不喜欢 的顺序translateY(0px)，所以如果你移动它，它会正常工作：http: //jsfiddle.net/joshnh/zJ5A9/

于 2012-09-04T10:01:39.867 回答