Transitions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed mattis leo. Nullam lobortis consequat libero ut consectetur. Donec pellentesque vulputate nunc, vitae elementum ipsum feugiat sed. Integer sagittis pretium ipsum, semper bibendum velit vehicula eu.

Transition Property

CSS transitions can be used to animate the following properties.

Note: The set of properties that can be animated is subject to change; as such, you should avoid including any properties in the list that don't currently animate, because someday they might, causing unexpected results.

Property	Value Type
background-color	<color>
background-image	Gradients only (not implemented as of 2010/04/11)
background-position	< percentage > \| < length >
background-size	< percentage > \| < length >
border-color	<color>
border-radius	< percentage > \| < length >
border-width	< length >
border-spacing	< length >
bottom	< percentage > \| < length >
-moz-box-flex	number
box-shadow	shadow
color	<color>
-moz-column-count	<length>, keywords
-moz-column-gap	number
-moz-column-rule-color	color
-moz-column-rule-width	<length>, keywords
-moz-column-width	<length>
clip	recatangle
fill	paint
fill-opacity	opacity-value
flood-color	<color> \| keywords
font-size	<percentage> \| <length>
font-size-adjust	number, keywords
font-stretch	keywords
font-weight	number \| keywords (excluding bolder, lighter)
height	<percentage> \| <length>
-moz-image-region	rect()
left	<percentage> \| <length>
letter-spacing	<length>
lighting-color	<color> \| keywords
line-height	number \| <percentage> \| <length>

Property	Value Type
margin (including sub-properties)	<length>
marker-offset	<length>
max-height	<percentage> \| <length>
max-width	<percentage> \| <length>
min-height	<percentage> \| <length>
min-width	<percentage> \| <length>
opacity	number
outline-color	<color>
outline-offset	integer
-outline-radius (including sub-properties)	<percentage> \| <length>
outline-width	<length>
padding (including sub-properties)	<length>
right	<percentage> \| <length>
stop-color	<color> \| keywords
stop-opacity	opacity-value
stroke	paint
stroke-dasharray	dasharray
stroke-dashoffset	<percentage> \| <length>
stroke-miterlimit	miterlimit
stroke-opacity	opacity-value
stroke-width	<percentage> \| <length>
text-indent	<percentage> \| <length>
text-shadow	shadow
top	<percentage> \| <length>
transform-origin	<percentage> \| <length>, keywords
transform	transform-function
vertical-align	<percentage> \| <length>, keywords
visibility	visibility
width	<percentage> \| <length>
word-spacing	<percentage> \| <length>
z-index	integer

Transition Duration

Specifies the number of seconds a transition animation should take to complete. By default, the value is 0, meaning that no animation will occur.

You may specify multiple durations; each duration will be applied to the corresponding property as specified by the -moz-transition-property property.

-moz-transition-duration: <time>[, <time>]*

time: The number of seconds the transition from the old value of a property to the new value should take.

Transition Timing Function

Used to describe how the intermediate values of the CSS properties being affected by a transition effect are calculated. This in essence lets you establish an acceleration curve, so that the speed of the transition can vary over its duration.

This easing function is specified using a cubic Bezier curve defined by four control points; the first and last of these are predefined to be (0, 0) and (1, 1). This property lets you define the values of the other two points, either using keywords to set them to predefined values, or to custom values.

-moz-transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )

					[,ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )]*

ease: This keyword sets the easing function to cubic-bezier(0.25, 0.1, 0.25, 1.0).
linear: This keyword sets the easing function to cubic-bezier(0.0, 0.0, 1.0, 1.0).
ease-in: This keyword sets the easing function to cubic-bezier(0.42, 0.0, 1.0, 1.0).
ease-out: This keyword sets the easing function to cubic-bezier(0.0, 0.0, 0.58, 1.0).
ease-in-out: This keyword sets the easing function to cubic-bezier(0.42, 0.0, 0.58, 1.0).
cubic-bezier: Specifies a cubic bezier curve to use as the easing function. The four number values specify the P1 and P2 points of the curve as (x1, y1, x2, y2). All values must be in the range [0.0, 1.0] inclusive.

Transition Delay

Specifies the number of seconds to wait between a change being requested to a property that is to be transitioned and the start of the transition effect.

A value of 0 indicates that the property will begin to animate its transition immediately when the value changes; positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.

You may specify multiple delays; each delay will be applied to the corresponding property as specified by the -moz-transition-property property.

-moz-transition-delay: <time>[, <time>]*

time: The number of seconds to wait between a property's value changing and the start of the animation effect.

Examples

Suspendisse sed libero magna. Duis egestas laoreet lectus, ut viverra eros vulputate nec. Aenean nec nulla at sapien rhoncus convallis. Integer viverra lacinia pretium. Sed porttitor dui eu libero rutrum congue. Aliquam posuere consectetur nibh in fringilla. Proin erat quam, vehicula vitae molestie nec, semper non erat. Nam ipsum leo, tincidunt nec euismod at, porta porttitor ipsum. Morbi sed est id libero fringilla molestie. Nulla tincidunt ipsum nulla, at ultricies dui.