There are two transitions happening on this site (at the moment anyway). One is in the header. When you hover over the text “CSS Snippets”, it rotates up. The rotation is actually done with the “transform” property, not “transition”. The transition part is that you can see it rotate up from the starting position to the ending position, instead of just jumping.
The other transition is when you hover over an item in the main menu. The color fades to the hover state, it doesn’t just change colors automatically.
Like many things in CSS you can specify the different parts of the transition individually, or with shorthand. I will be using shorthand unless I have a reason to not use it.
-webkit-transition: .2s all linear; -moz-transition: .2s all linear; -o-transition: .2s all linear; transition: .2s all linear;
This is a very simple starting point for transitions. Add this snippet of code to your regular state (for example add it to the css for #navigation li a), not the hover state. If you declare your transition on the regular state, it will perform the transition in both directions, and you won’t have to account for other states like focus or active. When this code is added to the regular state of something on your page, when the hover state is activated (or your return to regular state), the changes in properties will be transitioned over .2 seconds.
The first value is the duration or the transition. The second value is what do you want to transition. “All” will make sure any property that is changed between regular state and hover state gets transitioned. You don’t need to transition all of them, however. Many different properties can use a transition, see this for a list of properties.
The last value is the timing function. For simple transitions, I find “linear” to be fine, however, there are other choices that may work better in some situations.
You can also add a delay, but it can feel weird to the user delay the transition, on simple hovers. There are interesting things you can do with it, however.
The W3C documentation can explain this property in more detail. I will have more specific examples of transitions in the future.