CSS Transitions

CSS transitions allow you change a property value over a given duration. This can create a nice effect of changing something in CSS over a slower period of time instead of immediately. This can help make your webpage feel alive and can make it a bit more interesting to interact with

With a CSS transition you can chose 1) Which property to animate 2) When it will start 3) How long it will last 4) How long the animation will run for

Not all CSS properties can be animated. Check the full list to know which properties you can make come alive.

There is a shorthand css transition property which is written as:

.my-element {
  transition: transition: <property> <duration> <timing-function> <delay>;
}

The long form versions are:

transition-property: name of the css property to which the transition will apply
transition-duration: how long the transition will occur, e.g. 0.5s or 1s
transition-timing-function: specifies the speed over time an object is transitioned from one value to another. Some examples are linear, ease, ease-in, ease-out
transition-delay: how long the wait between the time a property is changed and when the transition begins

A simple transition can be seen with a color change on hover. Hover over the rectangle to see:

.rectangle {
  height: 20rem;
  width: 30rem;
  color: white;
  background-color: blue;
  transition: all 0.3s ease;
}

.rectangle:hover {
  background-color: purple;
}

Hover me!