CSS3 Animation for Forms

Head over to impressivewebs.com and checkout a great article on animations for forms. I especially like the demo for :disabled where the disabled input slowly changes color when it is re-enabled.

Most of the demos are pure CSS3 and they got me thinking about the possibilities for using animations to spice up forms. Here are some of my brainstorms:

• Observe keyup on a textbox and increase the height when the text becomes longer than a certain number of characters. Use CSS transition to animate the textbox enlarging.
• Change the border color on a text input when it becomes active. Animate the color change.
• On form validation, grow then shrink a text field to indicate an invalid value. Animate the size change.
• On an input's blur, scroll the form to the left to show the next section of the form. Animate the scroll.
• When a button is clicked, set it to inactive to prevent accidental double clicking. Set the inactive state to an opacity of 0.25. Animate the change.

Forms are a cool place to experiment with animations!