General

Transitions describe how to execute a CSS property animation from one state to another state over time.

In this demo you can choose the transition code from the selection list on the left, or you can write your own in the CSS Code window. The chosen transition is applied to the box in the middle of the display (on the right).

To Do

Hover the box and see the transition defined in the CSS code of the selection.

Play with background-color, radius, width, border, ... by changing the box properties in the CSS window. Then hover the box and see the effect of the transition you've defined.

Try transition on a single and multiple properties. Try all on transition property (or just don't put a property).

Play with duration and delay in transition. Duration and delay parameters may be in seconds (s), milliseconds (ms), ... and may be fractional (.2s).

In/Out Selection

Hover the middle area and follow after left/botton transition of the box. The transition is different on hover from the transition when mouse is removed.

Experiment the following:

1. Replace the transition in normal state to the one defined in hover (make both states transition the same). Hover and check.
2. Remove transition in the normal state and remain transition in hover. Hover and check.
3. Return to the original setting and remove transition on hover. Hover and check.
4. Return to the original and set 'all 2s' on hover. Hover and check.
5. Try other combinations.

To sum up, there are three basic ways that you can approach CSS transitions.

1. Link the transition to a non-hover selector. This makes the hover in and out transitions the same (only in reverse of course).
2. Link the transition to a hover selector. This creates a hover in transition but eliminates the hover out transition.
3. Link transitions to both selectors. In this case, the non-hover transition will affect the hover out event and the hover transition will effect the hover in event. This is the technique that you’ll want to go with if you want the most control over the separate events.

Delay Selection

There are 4 boxes in this demo. Each one has 'box' class and ids box1 - box4. Each box has initial width of 90px (see the definition of the .box).

When we hover the demo area (#demo-block), the width of each box is changed to 100% of the demo area (see the definition of #container:hover .box).Thus, transition takes place.

See transition delays defined for each box and compare their behaviour.

Note: negative delay can be used.

Q & A

Question: What happens if the transition property is visibility? display? opacity?

Answer: visibility and display are non-animatable properties. Thus, you can't make a transition on them. opacity is animatable. Check this in display/visibility selection.

Note that sometimes we want to make an element hidden (visibility: hidden), so it can't react on mouse activity for example. But we want a transition from visible state to hidden. In such cases in order to use transition, we will use both visibility and opacity. We will define transition on visibility from hidden to visible state with transition duration set to 0s and non-zero transition delay. Opacity will be set to the desired transition. In such a way transition on opacity to 0 will be seen.