PDA

View Full Version : Css Tab Animation



NateG
Dec 22nd, 2011, 10:14 PM
I found this awesome code for css tabs and I am trying to find a way for it to work with some of the new css animation effects. I want each tab to fad in and fade out. Does anyone have any ideas how this can be done using only css?

http://dl.dropbox.com/u/14080718/CSSTabs/index.html

Excavator
Dec 23rd, 2011, 01:44 AM
Hello NateG,
CSS is not going to be able to do any sort of transition/fade affect. You will need to look into js/jQuery for that.

http://www.queness.com/post/411/create-an-attractive-jquery-menu-with-fadein-and-fadeout-effect looks good...

VIPStephan
Dec 23rd, 2011, 01:47 AM
That’s a slick demo there. Now, you could work with CSS transitions (https://developer.mozilla.org/en/CSS/CSS_transitions) for the fading effect.

(Sorry, Excavator, to step on your toes.)

NateG
Dec 23rd, 2011, 01:52 AM
I thought it might be possible. I have tried a few transition codes, but I cant get it to work. Any ideas.

Thanks for all of the help.

Excavator
Dec 23rd, 2011, 02:21 AM
Thatís a slick demo there. Now, you could work with CSS transitions (https://developer.mozilla.org/en/CSS/CSS_transitions) for the fading effect.

(Sorry, Excavator, to step on your toes.)



I've always thought it should be possible. Thanks for the link VIP, I'm going to study up on this a bit.