การสร้างแอนิเมชันสำหรับคุณสมบัติ CSS transform

คุณสมบัติ transform เป็นหนึ่งในคุณสมบัติที่เหมาะสมที่สุดสำหรับการสร้างแอนิเมชัน เพราะได้รับ GPU acceleration (รันบน Compositor Thread) ไม่ทำให้เกิด layout reflow หรือ repaint ทั้งหน้า

ตัวอย่างโค้ด: การหมุน (Rotate)

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      margin: auto;
      border: 2px solid blue;
      width: 300px;
      height: 400px;
      background-color: orange;
      animation: myanim 3s;
    }
    @keyframes myanim {
      30% {
        transform: rotate(120deg);
      }
    }
  </style>
</head>
<body>
  <h1></h1>
  <div>
    <h1>Demo</h1>
  </div>
</body>
</html>

ฟังก์ชัน transform ที่ใช้ได้:

• translate(x, y), translateX(), translateY(), translateZ(), translate3d()
• rotate(angle), rotateX(), rotateY(), rotateZ(), rotate3d()
• scale(sx, sy), scaleX(), scaleY(), scaleZ(), scale3d()
• skew(ax, ay), skewX(), skewY()
• matrix(), matrix3d()
• perspective()

แนวทางปฏิบัติที่ดีที่สุด:

1. ใช้ transform แทน top/left/width/height/margin สำหรับการเคลื่อนที่/ขยาย
2. รวม transform หลายฟังก์ชันในคีย์เฟรมเดียว: transform: translateX(100px) rotate(45deg) scale(1.2);
ใช้ will-change: transform บอกบราวเซอร์ล่วงหน้า (แต่ใช้อย่ามากเกินไป)
3. ตั้ง transform-origin ให้เหมาะสม (default: center center)

ประสิทธิภาพ: Transform + Opacity = "Cheap animations" ที่รัน 60fps ได้บนอุปกรณ์ทุกระดับ