So I decided to add a little progressive enhancement with css transitions to a contact form with the theory that good looking contact forms are submitted more often.

The problem is that when the page is loaded it transitions from the default form styles the inputs feel the need to grow and change color. It's not a particularly bad effect, but i'd like it to appear as styled and then only change on :hover and :focus.

You can see the effect here (in a webkit browser).

Here's the relevant code:

div#contactForm input {
 background-image:-webkit-gradient( linear, left top, left bottom, color-stop(0, #252525),color-stop(.5, #111111), color-stop( .51, #000000 ), color-stop( 1, #050505)) ; /* Saf4+, Chrome */;
 -webkit-box-shadow: 0px 0px 3px #000; 
  text-shadow:1px 1px 3px #000;
  -webkit-transition: all 1.5s linear; /*Transition: Saf3.2+, Chrome */

div#contactForm input:hover { /*** Submit button Hover styles ***/
  -webkit-box-shadow: 0px 0px 10px #355;
        border-color: #333; 
        text-shadow: 0px 0px 10px #66b5ff;
        border-bottom-color: #454545;

  -webkit-transition: all .65s ease-out;  /*Transition: Saf3.2+, Chrome */

div#contactForm input:active { /*** click style ***/
text-shadow: 0 0 4px #050505;

  -webkit-transition: all 0.25s linear; /*Transition: Saf3.2+, Chrome */

The idea is to create a quick transition for the :focus event and then to have it fade out more slowly when the user switches to another field.

Edited for clarity

2 answers

Doug 1095
This was chosen as the best answer

The transition on the input should not have any effect on initial page load. It looks like Javascript is causing the problem. If I turn off JS, the problem doesn't happen, but the other CSS effects still work.

Answered about 7 years ago by Doug

You've set a transition on this:

div#contactForm input {}

Why? seems to me that if you want them loading with the style, you don't want a transition as well...

Answered about 7 years ago by Tony Crockford
  • Originally I had added the transition to the default style as well so that the css would transition back at a slower rate. Is there any way to transition on :unfocus? Chris Eich about 7 years ago