Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Css Tab Animation

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-22-2011, 09:14 PM   PM User | #1
NateG
New Coder

 
Join Date: Oct 2011
Location: Utah
Posts: 37
Thanks: 19
Thanked 0 Times in 0 Posts
NateG is an unknown quantity at this point
Css Tab Animation
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
Last edited by NateG; 12-22-2011 at 09:17 PM..
NateG is offline   Reply With Quote
Old 12-23-2011, 12:44 AM   PM User | #2
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
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/crea...fadeout-effect looks good...
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Old 12-23-2011, 12:47 AM   PM User | #3
VIPStephan
The fat guy next door


 
VIPStephan's Avatar
 
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,600
Thanks: 5
Thanked 865 Times in 842 Posts
VIPStephan is a jewel in the roughVIPStephan is a jewel in the roughVIPStephan is a jewel in the rough
That’s a slick demo there. Now, you could work with CSS transitions for the fading effect.

(Sorry, Excavator, to step on your toes.)
__________________
Don’t click this link!
VIPStephan is offline   Reply With Quote
Users who have thanked VIPStephan for this post:
Excavator (12-23-2011)
Old 12-23-2011, 12:52 AM   PM User | #4
NateG
New Coder

 
Join Date: Oct 2011
Location: Utah
Posts: 37
Thanks: 19
Thanked 0 Times in 0 Posts
NateG is an unknown quantity at this point
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.
NateG is offline   Reply With Quote
Old 12-23-2011, 01:21 AM   PM User | #5
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
Quote:
Originally Posted by VIPStephan View Post
That’s a slick demo there. Now, you could work with 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.
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Reply

Bookmarks

Tags
animation, css, css3, html, tabs

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 04:39 AM.
Advertisement
Log in to turn off these ads.