การทำ Multiple Transitions ด้วย CSS3

Multiple Transitions: Transition หลาย Property พร้อมกัน

ใช้ transition shorthand ระบุหลาย property คั่นด้วย comma แต่ละ property มี duration/timing/delay แยกกันได้

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .container div {
      width: 300px; height: 100px; border-radius: 1px;
      background: rgb(25, 0, 255); border: 2px solid red;
      transition: width 2s, border-radius 2s; /* 2 transitions */
    }
    .container:hover div {
      width: 100px; border-radius: 50%;
    }
  </style>
</head>
<body>
  <h1>Multiple Transitions Example</h1>
  <div class="container"><div></div></div>
  <h2>Hover เพื่อลดความกว้างและเปลี่ยนเป็นวงกลม</h2>
</body>
</html>

การทำงาน

• Hover → width: 300→100px (2s) + border-radius: 1px→50% (2s) พร้อมกัน
• Unhover → กลับสถานะเดิม ด้วย timing เดียวกัน

Staggered Transitions (สลับช่วงเวลา)

.card:hover .icon { transform: rotate(90deg); transition: transform 0.3s 0s; }
.card:hover .text { opacity: 1; transform: translateY(0); transition: all 0.3s 0.1s; }
.card:hover .btn { opacity: 1; transform: scale(1); transition: all 0.3s 0.2s; }

Transition กับ Transform/Opacity (Performance)

ใช้ transform (translate, scale, rotate) และ opacity หลัก – GPU accelerated, ไม่ trigger layout/repaint

Transition Events (JavaScript)

element.addEventListener('transitionend', (e) => {
  console.log('Transition ended:', e.propertyName);
});

ใช้ trigger action หลัง animation จบ (เช่น remove element หลัง fade out)