Effects & Animation

Transitions

A transition animates a property smoothly when it changes, for example on hover.

Syntax:

transition: property duration timing-function delay;

.button {
  background: #1c6fa8;
  transition: background 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background: #155a88;
  transform: translateY(-2px);
}

Timing function	Feels
`ease`	Natural (default)
`linear`	Constant speed
`ease-in`	Starts slow
`ease-out`	Ends slow, good for things appearing
`ease-in-out`	Slow at both ends