Wednesday - Transition Speed

When coding things like hover effects, you will notice that the transition from one style to the hover style is instant - it happens in a blink. Sometimes that is the effect you want, but often it is too abrupt. It is much more common for people to want more gradual transitions, where styles fade from one into the other.

We achieve that fade effect using transitions. In CSS, after you apply a hover selector (such as a:hover{}), between the curlies you can add transition: 2s ; to require two seconds for the hover effect to fully implement. I will demonstrate this on the big screen for you to see, and then I need you to implement it in your Weekly Coding Challenge for Week 12.

If you are still confused on how to apply transitions, I recommend checking out W3Schools' tutorial on transitions to give you another look at the property. Note that W3Schools includes Webkit language; we do not use Webkits in this class, so you should ignore that stuff for now. Webits are a workaround for browsers that are not compliant with current coding standards. Their presence is typically an indicator that you're dealing with a new idea in Web design and development and that it may not work reliably on all browsers.