CSS3 Transition Shorthand Property

Transition Shorthand: รวม property, duration, timing, delay ในบรรทัดเดียว

transition shorthand รวม 4 longhand properties สามารถระบุหลาย transitions คั่นด้วย comma

โค้ดตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    .container div {
      width: 300px; height: 100px; border-radius: 1px;
      background-color: rgb(25, 0, 255); border: 2px solid red;
      transition: border-radius 2s ease 1s, background-color 2s ease-out 1s;
    }
    .container:hover div {
      background-color: purple; border-radius: 50%;
    }
  </style>
</head>
<body>
  <h1>Transition Shorthand Property</h1>
  <div class="container"><div></div></div>
  <h2>Hover เพื่อเปลี่ยนสีและรูปทรงเป็นวงกลม</h2>
</body>
</html>

Syntax Breakdown

transition: border-radius 2s ease 1s, background-color 2s ease-out 1s;
/*         property      duration timing  delay,  property      duration timing  delay */

Longhand Properties

• transition-property: border-radius, background-color
• transition-duration: 2s, 2s
• transition-timing-function: ease, ease-out
• transition-delay: 1s, 1s

Multiple Transitions

.btn {
  transition:
    background-color 0.2s ease,
    transform 0.15s ease-out,
    box-shadow 0.2s ease-in,
    color 0.2s ease;
}

คำแนะนำ

• ระบุ property ชัดเจน (ไม่ใช้ all) เพื่อ performance และป้องกัน side effects
• ใช้ ease-out สำหรับ UI response (รู้สึกเร็ว) ease-in-out สำหรับ state changes
• Delay ใช้สำหรับ staggered animations (hover card แล้ว child animate ต่อกัน)