1

CSS3の@keyframesルールを使用して、ホバー時にdivをアニメーション化しようとしています。アニメーションのコードは、このページの一番下にあります（寛大にマークされた「HEREBEANIMATION」コメントASCIIアートの直後）。これには、@ keyframesルール、div、およびdiv：hoverが含まれます。このアニメーションが欲しかったページはここにあります。何らかの理由で、アニメーションが機能しません。CSSアニメーションを使ってみたのはこれが初めてなので、どこかで初心者の間違いがあるかもしれません。

4

1 に答える 1

1

divを0pxから200pxにアニメーション化しようとしている場合は、jQueryソリューションを使用する方がはるかに簡単です。jQueryは、SafariとChromeでのみサポートされている@keyframeと比較して、ブラウザー間の互換性を提供します。

次に例を示します。http：//jsfiddle.net/ZgcxL/

編集：

ユーザーをChromeとSafariだけに制限したくない場合は、jQueryを検討する必要があります。使い方はとても簡単です。<head></head>このコードをタグの間のどこかに追加するだけです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.macanimation').hover(function() {
        $(this).animate({top: '200px'});
    });
  });
</script>

編集2：

document.ready（）を忘れました。上記のコードを再貼り付けします。また、位置を追加します：絶対; divに追加し、幅に「px」を追加します。

div.macanimation {
    position: absolute;
    width:960px;
    height:500px;
    padding-left:40px;
    padding-right:40px;
    margin:auto;
    background-image:url(/Photos/MacHQ.png);
}

テスト済み、動作中。

于 2012-04-12T01:19:58.900 に答える