0

ウェルプ.. 以前は、Google Chrome で動作する 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 に答える