CODEWITHSUNDEEP
javascriptcsscss-transitionscss-animations
Adam Short
Adam Short

Reputation: 498

Animate an :hover event with CSS3

Here's my website: http://adamshort2.hostoi.com/index.html

As you can see when you hover over the nav links it brings up a "ribbon" style white box around the list element. What I'd like is for that to slide down from the top (animated) instead of just appearing. If possible just stick to CSS but I don't mind Javascript/Jquery if needed.

Upvotes: 0

Views: 143

Answers (3)

jonsuh
jonsuh

Reputation: 2875

If I may make a suggestion:

In this scenario it's better practice to take advantage of CSS3's translate3d because it's hardware-accelerated whereas animating using the left property is not hardware-accelerated.

There are plenty of articles that documents the increase in performance when comparing the two. Here's one for example: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

Here's how to achieve the animation using Explosion Pill's example:

#nav a {
    /* required to keep absolute background on top */
    z-index: 1;
    /* required to keep text on top of absolute bg */
    position: relative;
    /* not mandatory; makes it look better when animating out
    because during that time it will be white on white */
    transition: color 1s;
}

#nav li a:before {
    background-color: #FFF;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    display: block;
    width: 100%;
    height: 100%;
    /* element will not appear without this */
    content: " ";
    position: absolute;
    /* height of the <a> so bg is off screen */
    /* text will appear above bg */
    z-index: -1;

    -webkit-transform: translate3d(0, -225px, 0);
    -moz-transform: translate3d(0, -225px, 0);
    -ms-transform: translate3d(0, -225px, 0);
    -o-transform: translate3d(0, -225px, 0);
    transform: translate3d(0, -225px, 0);
    -webkit-transition: -webkit-transform 1s ease;
    -moz-transition: -moz-transform 1s ease;
    -o-transition: -o-transform 1s ease;
    transition: transform 1s ease;
    /* Prevents flickering */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
#nav li a:hover {
    color: red;
}
#nav li a:hover:before {
    -webkit-transform: translate3d(0, -50px, 0);
    -moz-transform: translate3d(0, -50px, 0);
    -ms-transform: translate3d(0, -50px, 0);
    -o-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
}

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191819

This can be done with pure CSS. You cannot do it with the <a> alone because you need the text to stay where it is while the background animates. Changing background-position is possible, but I chose to use another element (specifically a pseudo element).

#nav a {
    /* required to keep absolute background on top */
    z-index: 1;
    /* required to keep text on top of absolute bg */
    position: relative;
    /* not mandatory; makes it look better when animating out
    because during that time it will be white on white */
    transition: color 1s;
}

#nav li a:before {
    background-color: #FFF;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    display: block;
    width: 100%;
    height: 100%;
    /* element will not appear without this */
    content: " ";
    position: absolute;
    /* height of the <a> so bg is off screen */
    top: -175px;
    left: 0;
    transition: top 1s;
    /* text will appear above bg */
    z-index: -1;
}
#nav li a:hover {
    color: red;
}
#nav li a:hover:before {
    top: 0px;
}

Working demo: http://jsfiddle.net/cLsue/

Upvotes: 4

tremor
tremor

Reputation: 3186

The CSS "transition" property should suit your needs as a pure CSS solution, as long as you aren't concerned about compatibility with older browsers.

Here are 2 quick links that cover CSS transition.

Upvotes: 1

Related Questions