Home/ Questions/Q 7787525
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T20:42:02+00:00

I’m trying to animate a div on hover using CSS3’s @keyframes rule. The code

  • 0

I’m trying to animate a div on hover using CSS3’s @keyframes rule. The code for the animation is at the very bottom of this page (right after the generously marked “HERE BE ANIMATION” comment ASCII art). That includes the @keyframes rule, the div, and the div:hover. The page where I wanted this animation is right here. For some reason, the animation doesn’t work; this is the first time I’ve tried using CSS animation, so there’s probably some novice mistake somewhere.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you are trying to animate your div from 0px to 200px, it’s much more easier to use jQuery solution.
    jQuery offers cross-browser compatibility compare to @keyframe, which is only supported in Safari and Chrome.

    Here is an example: http://jsfiddle.net/ZgcxL/

    EDIT:

    If you don’t want your users to be limited only to Chrome and Safari, you should definitely consider jQuery. It’s very simple to use. Just add this code somewhere between your <head></head> tags.

    <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 forgot document.ready(). Re-paste the code above.
    Also add position: absolute; to your div and add ‘px’ to your width:

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

    Tested, working.

    • 0