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?