Transitions (CSS)

Transitions allow you to transform a CSS rule from one set of values to another, and can be triggered either by a pseudoclass selector, on a regular cycle, or just once when loaded.

This example I modified from MDN shows how you would transform the background color of a button on hover:

#button {
  background-color: rgba(0, 2, 143, 1);
  transition-property: background-color;
  transition-duration: 4s;
  transition-timing-function: ease;
  transition-delay: 2s;

#button:hover {
  background-color: rgba(0, 2, 143, 0.5);



Last modified: 202401040446