Transition

When referring to a carousel or a slider, transition is an effect that takes place between photos or slides. It is a visual effect of one slide changing to another, for instance, Fade or Curtain Bottom Left. They add dynamics to a slideshow, smoothing the changing effect between slides. For example, Fade transition effect can be used to fade in or out pictures in a slideshow, a Curtain Bottom Left transition changes slides from bottom to left creating the curtain effect:

In CSS3 transition is a presentation effect, which allows CSS changes occur smoothly over a specified duration, rather than happening instantaneously as by default. Transition effects can be applied to a wide variety of CSS properties, including background-color, width, height, opacity, etc. A simple way of applying transitions is with the help of CSS pseudo-classes, such as :hover or :focus.

Here is the basic example:

	.element{
	height: 100px;
	transition: height 2s linear;
	}
	
	.element:hover{
	height: 200px;
	}

We have specified the property name (height), the length of transition (2s), and one of the default timing functions (linear). When the :hover pseudo-class is active, height will be changed from 100px to 200px over a period of 2 seconds:

For more information on CSS3 transitions, please check this CSS3 documentation.