body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 30px;
}

/* 共同的方塊樣式 */
.box {
  width: 200px;
  height: 100px;
  margin: 20px auto;
  line-height: 100px;
  color: white;
  font-weight: bold;
  border-radius: 10px;
}

/* 1. Transition 範例 */
.transition {
  background: steelblue;
  transition: all 0.5s ease;
}
.transition:hover {
  background: tomato;
  transform: scale(1.5);
}

/* 2. Animation 範例 - 自動播放 */
@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}
.animation1 {
  background: darkorange;
  animation: move 3s infinite;
}

/* 3. Animation 範例 - hover 觸發 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animation2 {
  background: seagreen;
}
.animation2:hover {
  animation: spin 2s linear infinite;
}

/* 4. Gradient Background 範例 */
.gradient {
  background: linear-gradient(to right, purple, pink);
}