Css Animation Place Back In Original Position

CSS3 transitions using visibility and delay

Apr 21, 2011

One of the nigh common CSS3 transition animations used by developers in the coming years volition undoubtedly be making elements appear and disappear via the opacity holding. What previously was simply possible using JavaScript tin now be hands described in significantly less beefy CSS code:

div {   opacity:0;   transition:opacity 1s linear;*          } div:hover {   opacity:1; }

Sample: (hover your mouse below)

Hi World!

* Note: Because the spec is still in flux, most browsers require a vendor-specific prefix such equally -webkit-transition for Chrome/Safari, -moz-transition for Firefox and -o-transition for Opera to make CSS3 transitions work. For the sake of simplicity in the commodity, I will be using only manifestly transition in the examples.

The most exciting affair about CSS3 transitions is that, by design, they naturally fall back to the normal non-animated transitions for browsers which don't back up them. That ways you lot can start using them in product designs today! Using opacity to fade in elements is great for all kinds of novel website effects which reduce reliance on JavaScript for things developers everywhere are already doing.

Accept for example, the drib-downwardly menu. For years developers accept been creating snappy menus using only CSS :hover effects. It would just make sense to start applying for opacity transitions to these menus to brand them just a little bit more than slick. However, hither is where we run into our first problem with using opacity.

An element with opacity of zero is withal "opaque" to clicks and mouse-overs. This causes serious bug, especially for drop down menus:

div {   groundwork-color:#f6f6f6;   padding:2px 5px;   position:relative: } div > ul {   list-manner-type:none;   margin:0px;   padding:2px 10px;   position:absolute;   left:0px;   pinnacle:100%;   groundwork-color:#eeeeee;          opacity:0;          transition:opacity 0.5s linear;          } div:hover > ul {          opacity:1;          }

Sample:

Hover for menu

Bill of fare detail 1
Card item ii
Menu particular 3
Card item 4

I'thou a link!

It looks nice, just the trouble becomes obvious when you lot try to click the link. The fully transparent menu still appears when we hover any area information technology covers, essentially preventing all interaction with any content beneath. Not to mention the behaviour itself is quite odd, especially when moving the mouse toward the link from beneath. What we want is to prevent the carte du jour from receiving hover events when it is fully transparent.

Okay, the display belongings can do that with the cake and none values. Permit's requite it a try:

. . . div > ul {   . . .          display:none;          opacity:0;   transition:opacity 0.5s linear; } div:hover > ul {          display:block;          opacity:i; }

Sample:

Hover for menu

Menu detail ane
Card item 2
Menu item 3
Menu item 4

I'm a link!

Hey at present, we can click that link without the menu appearing! But... information technology no longer animates in Chrome and Firefox, and it just animates the fade-in function in Opera. When you mouse out of the carte du jour, it just vanishes. Well, this sucks; I guess we can't use display with transitions if we desire them to work reliably cantankerous-browser.

Fortunately, there is another property we can use: visibility. Elements that are visibility:hidden are transparent to clicks and hover events, which is exactly what nosotros want. Let's do this!

. . . div > ul {   . . .          visibility:hidden;          opacity:0;   transition:opacity 0.5s linear; } div:hover > ul {          visibility:visible;          opacity:i; }

Sample:

Hover for menu

Carte du jour item one
Menu item 2
Card item iii
Carte item 4

I'one thousand a link!

Splendid! Now all the browsers conduct the aforementioned way. Unfortunately they all behave the same way as Opera: The fade-in works fine, but in that location is no fade-out, it just disappears. To debug this problem, we demand to delve deeper into how CSS3 transition timing actually works.

We have an chemical element, the menu, which switches from hidden to visible on mouseover, and smoothly transitions from fully transparent to fully opaque in one-half a second. That seems logical, but why is the fade-out not happening when nosotros contrary that procedure? The primal is knowing at what point the switch from visibility:visible to visibility:hidden occurs. In both cases, this switch happens immediately.

Fade-in activity timeline

User mouses over the chemical element
visibility is switched to visible
opacity transition animation begins
opacity transition animation ends

Fade-out activeness timeline

User mouses out of the chemical element
visibility is switched to subconscious
opacity transition animation begins
opacity transition animation ends

In the 2d case, when visibility switches back to hidden, it sabotages our whole animation past hiding information technology. The animation still occurs, it's merely subconscious from view. We really want the fade-out action timeline to look like this:

User mouses out of the element
opacity transition animation begins
opacity transition animation ends
visibility is switched to hidden

But how in the world can we filibuster a fashion from taking effe... Oh my goodness, CSS3 transitions can do that also! And lucky us, visibility is one of the select group of CSS properties which are afflicted by CSS transitions. Let'southward slap on a visibility transition!

. . . div > ul {   . . .   visibility:hidden;   opacity:0;   transition:visibility 0s linear 0.5s,opacity 0.5s linear; } div:hover > ul {   visibility:visible;   opacity:i; }

Sample:

Hover for carte

Menu particular 1
Menu item 2
Menu detail three
Card item iv

I'yard a link!

Quick caption: We added a visibility transition with a 0s animation time, a linear animation curve, and we too used the optional filibuster argument to set an animation delay of 0.5s. This means there volition be a one-half second delay before the transition takes identify, which exactly equals the time taken by our opacity fade out. And...

... okay the fade-out works, but adding that code ruined the fade-in which was working then nicely before. What gives? The delay we added to the visibility belongings is taking event both during the fade-in and the fade-out. All we've done is made our fade-in action timeline await like this:

User mouses over the chemical element
opacity transition animation begins
opacity transition animation ends
visibility is switched to visible

ARGH! Now what? Nosotros want the visibility to modify with no filibuster on the fade-in, only with a one-half-2d delay on the fade-out. Is that even possible? Information technology seems like there is no fashion to specify different transition backdrop for the two halves of the blitheness effect. Is all lost? Must nosotros resort to JavaScript?

There is 1 more matter we tin try. Like in many CSS modules, such as edge and background, the CSS3 transition property is actually a shortcut holding which groups several backdrop you tin can specify individually. Ane of these properties is transition-delay. Using this property nosotros want to temporarily set the filibuster of the visibility transition to 0s only during the fade-in portion of the animation. Simply how do nosotros specify that?

Oh yeah! The fade-in only happens while the user has their mouse over the element. The fade-out doesn't happen until the mouse cursor is removed. Then we tin apply this special transition-filibuster to the :hover state of the element.

. . . div > ul {   . . .   visibility:hidden;   opacity:0;   transition:visibility 0s linear 0.5s,opacity 0.5s linear; } div:hover > ul {   visibility:visible;   opacity:1;          transition-delay:0s;          }

Sample:

Hover for menu

Menu item 1
Menu item 2
Menu detail 3
Card item 4

I'm a link!

You'll find that we only specified ane delay fourth dimension, while we are using two transitions: visibility and opacity. Co-ordinate to the CSS3 specification, when there aren't enough filibuster values to go around, they are repeated to apply to all transitions. In this case, the opacity transition had a 0s delay by default so it actually doesn't alter.

How about that, it works! With a temporary alter in the delay value of the transition, we successfully created a drop-downwardly menu that both fades-in and fades-out very nicely, and also doesn't interfere with content below information technology. But is looking prissy the end of the story?

Benefits for Usability

Heavens no! Driblet-down menus using :hover have been blasted by usability experts for years; specially when you commencement adding in sub-menus. If you lot move your mouse just one pixel outside of an chemical element in the :hover chain, the whole menu up to that betoken will plummet instantly, likely hiding the bill of fare pick you lot were trying to go to.

All that changes with CSS opacity transitions. When your mouse cursor travels exterior a :hover chain element, its children don't disappear immediately, but rather start the opacity animation to transparency. Before the animation has completed, the chemical element is yet bachelor to receive :hover events. Therefore if you lot move yous mouse back onto the element apace, the concatenation won't plummet and your target will still be available to select. This solves the dreaded "diagonal problem" that plagues so many CSS driblet-downwardly bill of fare implementations.

Who knew CSS3 transitions could be for more merely fancy furnishings? They're a benefaction for bill of fare usability as well! In the future, I definitely await we will see many more uses for transitions beyond simply prettying up websites. Perhaps y'all are tinkering with some already.