Example 1: Simple Transition
On the transitions.css stylesheet, try moving the transition property from the #ex1:hover rule to the #ex1 rule. See what happens! Also try setting the amount of time for the transition to 500ms.
Example 1 animates the width property, but lots of properties in CSS can be animated. Check out this page on the MDN for a full list.
Example 2: Transition Multiple Properties
Please notice in this example:
- This example is animating some of the different properties from the list above.
- Multiple properties can be animated by listing them, or you can use 'all' to animate all of them.
- What happens if you move the transition from the hover rule to the #ex2 rule in this example?
- Notice how this content is pushed down as the animation happens.
Example 3: Easing
Easing can provide a more natural look to an animation. CSS has some presets for linear, ease, ease-in, ease-out and ease-in-out. For a deeper understanding of what exactly these presets are you can check out this great article on the CSS Tricks website.
As Chris Coyier notes in his article, the general rule is to ease-in when things are moving out, and ease-out as things are moving in.
For creating custom animations I like Matthew Lein's CSS easing tool: Ceaser
Finally, notice that I have separated the transition properties here into "transition-property", "transition-duration", and "transition-timing-function". There is also a "transition-delay" property that can be used to delay a transition from starting. You can also combine all these into the shortcut "transition" property.
Check out the MDN page on transitions.
Example 4: Transitioning Specific Properties
Sometimes you want some properties to transition but not others. This example shows how you can transition two or more specific properties