.timing-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 20px 0;
}

.timing-box {
  width: 80px;
  height: 80px;
  background-color: #3498db;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  transition-property: transform, background-color;
}

.timing-box:hover {
  transform: translateY(-20px);
  background-color: #e74c3c;
}

.timing-100ms { transition-duration: 0.1s; }
.timing-250ms { transition-duration: 0.25s; }
.timing-500ms { transition-duration: 0.5s; }
.timing-1s { transition-duration: 1s; }
.timing-2s { transition-duration: 2s; }