CSS transitions

CSS transitions allow the CSS writer to say that this CSS rule should be applied in a time sequence.

For instance say we wanted a div with the class “INFOgraph” to become visible - i.e. move from 0 opacity to 100 opacity (TODO - concept for opacity). Then this code would do it:

/* By default the information is hidden */
.INFOgraph{
   opacity: 0%;
}

/* The information is hidden */
.INFOgraph:hover {
   opacity : 100%;
   transition: 100ms ease-in;  /* Means that the hover style comes in a gradual way */
}

We’re using the pseudo class selector “hover” which means when the mouse comes over element with the class INFOgraph and then the opacity will become 100%.

Notice the symmetry with using Javascript to manipulate CSS properties in a time sequence?

Concepts

CSS transitions

Analytics

Related content