ホバー上のCSSでdivをアニメーション化する

私はCSS3の@keyframesルールを使ってホバー上のdivをアニメーション化しようとしています。アニメーションのコードは、this pageの最下部にあります（「ASCIIアニメーション」コメント）。これには@keyframesルール、div、div：hoverが含まれます。このアニメーションをしたいページはright hereです。何らかの理由で、アニメーションが機能しません。 CSSアニメーションを試してみたのはこれが初めてのことなので、どこかの初心者の間違いが多分あります。ホバー上のCSSでdivをアニメーション化する

出典

2012-04-12 Jules

@keyframesルールは、どのブラウザでもサポートされていません。 Firefoxは、代替の@ -moz-keyframesルールをサポートしています。 SafariとChromeは、@ -webkit-keyframesの代替ルールをサポートしています。あなたはまだこれを混乱させる必要がありますか？ =） –

@ -webkit-keyframesのルールは既にそこにあると思います。私はDreamweaverがそれを有効な@keyframesの変種として認識しなかったので、-mozから棄権しました。しかし、Chromeのページをテストしたところ、アニメーションは表示されません。 – Jules

私はあなたが興味を持っている実際のページを指すあなたの質問からのリンクを残したと思う –

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

は一例です：http://jsfiddle.net/ZgcxL/

EDIT：

あなたは、ユーザーが唯一の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>

EDIT 2：

I）は、（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-12 01:19:58

私は大好きですが、jQueryについてはCSS3についてよりもはるかに少ないことを知っています。唯一の解決策であれば試してみます。さもなければ、私はCSS3に固執することを好むでしょう。 – Jules

実際、私はちょうど私のroot/jsフォルダに最新のjquery.jsを入れました。そして、私はjQueryの急降下をする準備ができています。このスクリプトはどこに置くのですか？$（ 'div'）。 – Jules

私の編集した答えを見てください。 –

ホバー上のCSSでdivをアニメーション化する

答えて

関連する問題