RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/transition below:

transition · WebPlatform Docs

transition Summary

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element.

Overview table

Initial value: see individual properties
Applies to: all elements, :before and :after pseudo elements
Inherited: No
Media: interactive
Computed value: as specified
Animatable: No
CSS Object Model Property: transition
Percentages: N/A

Syntax

transition: transition-delay
transition: transition-duration
transition: transition-property
transition: transition-timing-function

Values

transition-property: Value of the transition-property property.
transition-duration: Value of the transition-duration property.
transition-timing-function: Value of the transition-timing-function property.
transition-delay: Value of the transition-delay property.

Examples

When you hover over the div, the height property will gradually change from 100 to 500.



div:hover {
  height: 300px;
  transition: height 2s;
}

View live example

A list of translatable properties exists here: http://www.w3.org/TR/2009/WD-css3-transitions-20091201/#animatable-properties-

Related specifications

CSS Transitions: W3C Working Draft