Lesson 13: CSS Transitions

• A transition describes how a property should display change when given a different value.

• Anatomy of a transition:

  • transition-property is the property that you want to transition;
  • transition-duration in seconds or miliseconds: 2s or 2000ms;
  • transition-timing-function "cushioning" for the transition, optional: defaults to ease;
  • transition-delay the number of s/ms to delay the transition before firing it, optional: defaults to ease;

Example of transitions:

Play around with the example above. Try to add the code below.

transition-property: width; transition-delay: .5s;

css3 transitions