Codecademy Logo

CSS Transitions and Transforms

css-transitions-animatable-properties

CSS transitions enable us to control the timing of visual state changes. Color, background color, font size, width, and height are all states that can be transitioned.

css-transitions-four-components

CSS Transitions have 4 components:

  • A property that will transition.
  • The duration which describes how long the transition takes.
  • The delay to pause before the transition will take place.
  • The timing function that describes the transition’s acceleration.

transition-duration-default-value

If a value is not given for transition-duration, by default, the value is 0s. This mean no animation will occur.

css-transition-timing-function

The transition-timing-function property is used to describe how a transition will advance over its duration. Values such as ease-in, ease-out, ease-in-out, and linear allows a transition to change speed during its course.

css-transition-delay

The transition-delay describes when the transition effect will start. The unit specified by this value is defined in seconds s or milliseconds ms.

transition-properties-comma

Two (or more) CSS properties can be triggered in a single transition by separating them with a comma.

transition-property-all

all is a value for transition-property that causes every changing property to transition.

css-transition-shorthand-syntax

The transition CSS property is the shorthand syntax for transition-property, transition-duration, transition-timing-function, and transition-delay.

Learn More on Codecademy