We've added all of the code we needed for our forms; now, let's add some styles to our form to get the animation styles working.
Add this code near the bottom of the stylesheet we created named
form-animation.cssbetween the styles forinput:focusand#form1 input[type=submit]:#form1 input.hover {border:1px solid #FF7F7F;}#form1 input.focus { background:#FFD8D8; border:1px solid #FF7F7F; }
Now, let's preview the form with our newly added styles and take it for a spin. You'll notice that when you hover over each of the text inputs, that a red border slowly fades in and slowly fades out when we move our mouse cursor off of the text input. Clicking on the text inputs will now fade the background color to red as well. When we click away from the focused input, the red background color then slowly fades back to its original color.
The order of the CSS styles...