make your navigation tabs dance

[soaringeagle]

just another animation i was playing with

@-webkit-keyframes tabdance {
0%, 100% {
-webkit-transform: rotate(0) skewx(0);
}
17% {
-webkit-transform: rotate(4deg) skewx(4deg);
}

92% {
-webkit-transform: rotate(-4deg) skewx(-4deg);
}
}
@-moz-keyframes tabdance {
0%, 100% {
-moz-transform: rotate(0) skewx(0);
}
17% {
-moz-transform: rotate(4deg) skewx(4deg);
}

92% {
-moz-transform: rotate(-4deg) skewx(-4deg);
}
}
@-ms-keyframes tabdance {
0%, 100% {
-ms-transform: rotate(0) skewx(0);
}
17% {
-ms-transform: rotate(4deg) skewx(4deg);
}

92% {
-ms-transform: rotate(-4deg) skewx(-4deg);
}
}
@-o-keyframes tabdance {
0%, 100% {
-o-transform: rotate(0) skewx(0);
}
17% {
-o-transform: rotate(4deg) skewx(4deg);
}

92% {
-o-transform: rotate(-4deg) skewx(-4deg);
}
}
@keyframes tabdance {
0%, 100% {
transform: rotate(0) skewx(0);
}
17% {
transform: rotate(4deg) skewx(4deg);
}

92% {
transform: rotate(-4deg) skewx(-4deg);
}
}

#xg_navigation ul li a {
-webkit-animation-name: tabdance;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 1s;
-moz-animation-name: tabdance;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 1s;
-ms-animation-name: tabdance;
-ms-animation-timing-function: ease-in-out;
-ms-animation-iteration-count: infinite;
-ms-animation-duration: 1s;
-o-animation-name: tabdance;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 1s;
animation-name: tabdance;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
}

you can adjust the speed by changing the duration

(fixed issue with subtabs not displaying)

[Aanu Bello]

can you show us the live preview?

[soaringeagle]

www.phillyhangout.com

[Kos]

This is awesome.......you have no idea........as my header is the Chicago skyline and the tabs are set in the water along the coastline.  Now they're *rocking* away!  *LOL*  Wonder if any of my members are subject to sea sickness.  Thank you so much Soaringeagle.

[soaringeagle]

lets see your url

[Kos]

http://stockbuz.net

I noticed it's not working in IE but it does function in Firefox

[Kos]

In the old editor, you paste it in Appearance/Advanced box.  idk with the new Editor

[Kos]

In the old editor, you paste it in Appearance/Advanced box.  idk with the new Editor

[soaringeagle]

advanced css

in design studio

[Baqur mehdi]

awesome. work great on my network,. thank u  so much the real tech guy

[dave]

Hi Soaring Eagle,I'm glad you got around to doing this as it does look nice on the water.......  can you tell me how to just make it dance for 4s and then stop please,

and is there a way to only make it dance once for the user thats on the site and not dance each time here navigates through the site

Thanks for any help :-)

[soaringeagle]

change each  infinate to 4

and no it starts at page load everytime but u can set a delay

the animation durartions 1 sexc so 1 sec is 1 cycle through the nimation  the iteration count is how many times it runs through the animation ..its set to infinate now change it to 4 and it does 4 times 1 second  4 cycles through then stops