Transition

Allows gradually changing a CSS value when it changes.

This property is completely compatible with CSS transition.

The timing function is a keyword (ease, linear, ease-in-out, …), cubic-bezier(), steps() or linear(). linear(0, 0.25 40%, 1) joins its stops with straight lines; a stop takes up to two positions to hold its value between them, and stops without one are spread evenly between their neighbours.

:root {
  justify-content: space-around;
  text-align: center;
  background-color: white;
}

view {
  align-self: center;
  width: 100px;
  height: 100px;
  background-color: coral;

  transition: width 1s, background-color 400ms 1s;
}

view:hover {
  width: 240px;
  background-color: cornflowerblue;
}