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:

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!

Read more about it here

Instagram Post