CSS3 expanding tabs with transition in duration and delay
- Works using hover and focus on links. For keyboard accesibilty, use the [tab] key in Firefox 4, Safari 5 and Internet Explorer 9 and [shift] key and arrow keys in Opera 11.
- The transition in duration and delay partially works in Firefox 4, Safari 5 and Opera 11.
- Firefox 4 has full support on transitional properties.
- Safari 5 and Opera 11 do not clip the background-image to the padding-box along the border-radius path.
- Works the same regardless of User Agent zoom setting or font size setting (personally tested from 13px to 44px). Fails with IE's text size options.
Example 2: Same as the previous example but with generated content.
Example 3: Same as the previous example but with different generated content.
Note: You can sort of control the position of the Firefox by hovering it with the cursor. If you can move the cursor towards the right at the same rate as the rolling Firefox, then there is not flickering. Only works in one direction.