CSS transition-property Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic page styles */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background: #f5f7fa;
}

/* Demo layout */
.demo {
  text-align: center;
}

/* The box that will transition */
.box {
  width: 180px;
  height: 120px;
  line-height: 120px;
  background-color: #4f86f7;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  /* Only these properties will animate */
  transition-property: background-color, transform;
  transition-duration: 400ms;
  transition-timing-function: ease;
  transition-delay: 0ms;
  box-shadow: 0 6px 18px rgba(79,134,247,0.18);
}

/* Hover changes background-color, transform and border-radius (border-radius changes instantly because it's not listed in transition-property) */
.box:hover {
  background-color: #2b6df6;
  transform: translateY(-8px) scale(1.05);
  border-radius: 24px;
}

/* For keyboard accessibility */
.box:focus {
  outline: 3px solid rgba(43,109,246,0.18);
}
</style></head><body><div class="demo">
  <h2>transition-property example</h2>
  <div class="box" tabindex="0">Hover me</div>
</div></body></html>