CSS3 Transitions คืออะไร + สอนวิธีใช้

โดยปกติแล้ว เวลา value ของ css property เปลี่ยนไป มันก็จะส่งผลกับ html element นั้นในทันที ตัวอย่างเช่น เดิมกล่องหนึ่งมีพื้นหลังสีแดง และมีขนาด 100px ทั้งความกว้างและความสูง

สมมติว่าเราอยากให้เวลา hover แล้ว กล่องนี้มีพื้นหลังเปลี่ยนเป็นสีน้ำเงินแทน และยังมีขนาดใหญ่ขึ้นเป็น 200px ทั้งความกว้างและความสูง เราก็จะต้องเขียนโค้ดประมาณนี้

เมื่อเราลอง hover ดู เราก็จะพบว่ากล่องมีรูปร่างหน้าตาเปลี่ยนจาก value เก่า เป็น value ใหม่ “ในทันที” ที่เรา hover

CSS Transitions คืออะไร ?

CSS Transitions เป็น feature ใหม่ใน CSS3 ที่ช่วยให้เราสามารถกำหนดได้เองว่า “ในการเปลี่ยนแปลงจาก value เก่าไปสู่ value ใหม่ ของในแต่ละ property นั้น เราอยากให้เป็นไปในรูปแบบไหน” หรือพูดง่ายๆ ก็คือ เราสามารถกำหนดให้ html element ค่อยๆ เปลี่ยน value ในแต่ละ property ทีละนิดๆ ได้ ไม่ใช่เริ่มเปลี่ยนจาก 0 แล้วไป 100 เลย เป็นต้น

CSS Transitions ทำอะไรได้บ้าง ?

การนำ CSS Transitions ไปใช้มีอยู่หลายรูปแบบด้วยกัน ซึ่งรูปแบบหลักๆ มีดังนี้

  • Colorค่อยๆ เปลี่ยนสี จากสีหนึ่งเป็นอีกสีหนึ่ง
  • Dimensionค่อยๆ เปลี่ยนขนาด จากขนาดหนึ่งเป็นอีกขนาดหนึ่ง
  • Positionค่อยๆ เปลี่ยนตำแหน่ง จากตำแหน่งหนึ่งเป็นอีกตำแหน่งหนึ่ง

Properties

สำหรับ properties ต่างๆ ที่ใช้ในการทำ CSS Transitions มีดังนี้

  • transition-property: กำหนด property ที่จะใช้ transition
  • transition-duration: กำหนดว่าจะให้ transition กินระยะเวลานานเท่าไร ค่า default คือ “0” คือไม่ทำ transition
  • transition-timing-function: กำหนดรูปแบบของ speed ที่จะใช้กับ transition ค่า default คือ “ease”
  • transition-delay: กำหนดเวลาที่จะเริ่มทำ transition ค่า default คือ “0” คือไม่มีดีเลย์

Workshop – สร้าง Animation ง่ายๆ ด้วย CSS Transitions

จากตัวอย่างก่อนหน้า เรามีโค้ด css แบบนี้

อย่างที่บอกไปว่า “.box” จะมีรูปร่างหน้าตาเปลี่ยนไปในทันทีที่เรา hover ทีนี้เราจะมาลองใช้ transition กับ html element นี้กัน โดยโจทย์แรกของเราก็คือ

  • เมื่อ hover กล่องจะค่อยๆ กว้างขึ้นๆ ภายในระยะเวลา 1 วินาที

จากโจทย์ข้างต้น เราจะต้องเขียน css rule แบบนี้

เมื่อลอง hover ดู จะเห็นว่าความกว้างของกล่องจะค่อยๆ เพิ่มขึ้นทีละนิดๆ ซึ่งเป็นผลมาจาก CSS Transitions นั่นเอง ทีนี้เราลองมาใส่ transition ให้กับ property “height” ดูบ้าง

  • เมื่อ hover กล่องจะค่อยๆ สูงขึ้นๆ ภายในระยะเวลา 1 วินาที

จากโจทย์ข้างต้น css rule ของเราจะเปลี่ยนเป็นแบบนี้

จะเห็นว่าเราสามารถใส่ transition ให้กับหลายๆ properties ได้พร้อมๆ กัน โดยใช้เครื่องหมาย “,” คั่น ในส่วนของ duration, timing-function และ delay ก็เช่นเดียวกัน โจทย์ต่อไปก็คือ

  • เมื่อ hover สีพื้นหลังของกล่องจะค่อยๆ เปลี่ยนไป ภายในระยะเวลา 1 วินาที

ในทำนองเดียวกัน ให้เราเพิ่ม property “background” เข้าไปอีกอัน เราจะได้ css rule แบบนี้

Shorthand Property

อย่างไรก็ตาม เราสามารถรวม properties ของ transition ทั้ง 4 เข้าด้วยกันได้ด้วย property “transition” โดย syntax จะเป็นแบบนี้

ให้เราระบุ property, duration, timing-function และ delay เรียงต่อกันไปตามลำดับเลย ลองดูตัวอย่างนี้

จากโจทย์ 3 ข้อก่อนหน้านี้ หากเราใช้ shorthand property แล้วล่ะก็ เราจะสามารถเขียนได้สั้นลงเหลือเพียงแค่นี้

Timing Functions

timing function คือวิธีการคำนวณ speed ของ transition โดยปกติแล้ว timing function จะมีค่าเป็น “ease” แต่ถ้าเราต้องการให้ speed คงที่ตลอดการทำ transition ให้เรากำหนด timing function เป็น “linear (เส้นตรง)”

linear
ease
ease-in
ease-out
ease-in-out

Deifferent Timing Functions

เมื่อเราลอง hover ดู ถึงแม้ว่ากล่องทั้ง 5 จะกำหนด duration เอาไว้เท่ากันที่ 2s (จะสังเกตว่าทุกกล่อง transition เสร็จพร้อมกัน) แต่ speed ของแต่ละกล่องกลับไม่เท่ากัน ทั้งนี้เป็นเพราะการกำหนด timing function ที่ต่างกันนั่นเอง

Transition Delays

การกำหนด delay คือการหน่วงเวลาเอาไว้ก่อนที่จะเริ่มทำ transition โดยค่า default ของ delay ก็คือ “0” ซึ่งก็คือให้ทำทันทีนั่นเอง

Same Delays

จากตัวอย่างด้านบน กล่องทั้ง 10 ถูกกำหนดให้ delay เป็น 0 มันจึงทำ transition ทันทีที่เรา hover แต่จะเกิดอะไรขึ้น หากเรากำหนด delay ของแต่ละกล่องให้มีค่าแตกต่างกัน

Different Delays

จากตัวอย่างด้านบน เราได้กำหนด delay ให้กับแต่ละกล่องเป็น 0s, 0.1s, 0.2s, … , 0.9s ตามลำดับ จะเห็นว่าแต่ละกล่องนั้นเริ่มทำ transition ไม่พร้อมกัน

Advanced Delays

นอกจากเราจะสามารถกำหนด delay ของแต่ละกล่องให้แตกต่างกันได้แล้ว เรายังสามารถกำหนด delay ของแต่ละ property ให้ต่างกันได้ด้วย แบบนี้

หากเรากำหนดแบบนี้ กล่องก็จะขยายทางด้านกว้างก่อน แล้วค่อยขยายทางด้านสูง และสุดท้ายก็จะเปลี่ยนสี ตามลำดับ ลองดูตัวอย่างต่อไปนี้

จากตัวอย่างด้านบน เป็นการนำ delay ไปใช้กับ position ถึงแม้ว่ากล่องทั้ง 4 จะเลื่อนไปยังมุมเหมือนๆ กัน แต่จะเห็นว่าวิธีการไปนั้นต่างกัน

เปลี่ยนมาใช้ CSS Transitions กันเถอะ !

ถึงแม้ว่าสิ่งที่ CSS Transitions ทำได้ จะไม่ใช่เรื่องแปลกใหม่อะไร หลายๆ คนคงจะเคยเห็นสิ่งเหล่านี้มาบ้างแล้วจากการใช้ Flash หรือ JavaScript เข้ามาช่วย อย่างไรก็ตาม CSS Transitions กลับดูน่าใช้มากกว่าวิธีอื่นๆ ตรงที่

  • การทำ animation ต่างๆ ล้วนอยู่ในส่วนของ presentation ซึ่งหมายความว่ามันควรทำด้วย CSS
  • CSS Transitions ฝังอยู่ในตัว web browsers เลย นั่นหมายความว่ามันจะสามารถทำงานได้อย่างรวดเร็ว และยังไม่ต้องพึ่งการติดตั้ง plugin อะไรเพิ่มเติมอีกด้วย
  • CSS Transitions รองรับทุกๆ properties ที่สามารถทำ transition ได้ ในขณะที่ JavaScript อาจยังคงรองรับเพียงแค่บาง properties เท่านั้น
  • บาง web browser engine อย่างเช่น Webkit จะใช้ hardware เข้ามาช่วยในการทำ animation ที่เกิดจาก CSS Transitions ด้วย

อย่างไรก็ตาม CSS Transitions ก็ยังมีข้อเสียอยู่เหมือนกันในส่วนของ Browser Support ที่จะใช้ได้ตั้งแต่ IE10 ขึ้นไปนั่นเอง

(Visited 8,671 times, 4 visits today)

9 Responses to “CSS3 Transitions คืออะไร + สอนวิธีใช้”

  1. Kunathip Boonruangkhao says:

    อยากทำลูกเล่นในเว็บแต่ติดปัญหา IE ไม่ support นี่แหละครับ

    • Siam HTML says:

      อ่านต้องใช้ http://modernizr.com/ เข้ามาช่วย detect ครับ ว่า browser นั้นรองรับ css transitions หรือยัง ถ้ายังไม่รองรับ ให้ใช้ jQuery Animate เป็น fallback ครับ

    • Sappawish Siripon says:

      ผมแก้ปัญหาด้วยตัวนี้ครับ..

      http://ricostacruz.com/jquery.transit/

      มันจะ check browser support ให้เอง แล้วก็ fallback กลับให้

      • Siam HTML says:

        การใช้ JS แบบที่คุณ Sappawish Siripon แนะนำก็เป็นอีกวิธีที่ใช้ได้ดีเลยนะครับ คือสุดท้ายแล้วมันก็จะไปใช้ CSS Transitions อยู่ดี แต่มันจะช่วยกำหนด fallback ให้เราโดยอัตโนมัติเลย ส่วนเนื้อหาในบทความนี้จะเป็นเนื้อแท้ของ CSS Transitions ที่ไม่มีอะไรมาครอบ การนำไปใช้จริงก็อาจไม่สะดวกเท่า tool ที่เค้าทำมาให้ใช้สำเร็จรูปแล้วครับ

  2. ในกล่องของ Deifferent Timing Functions
    เมื่อเอาเมาส์ไปชี้ที่กล่อง แต่วัตถุด้านในเลื่อน ใช้โค๊ดยังไงหรอครับ
    โดยปกติแล้ว ถ้าเรา :hover วัตถุไหน ต้องเอาเมาส์ไปชีที่วัตถุนั้้นเท่านั้นมันถึงทำงาน

    ช่วยทีครับ งงมากเลยตอนนี้

  3. สามารถเขียนแบบนี้ได้เลยครับ

    .someContainer:hover .someElement {
    background: red;
    }

    อธิบายได้ว่า .someElement จะมีพื้นหลังสีแดงก็ต่อเมื่อ .someContainer โดน hover อยู่ครับผม ^_^

  4. ขอบคุณครับ

  5. ก็ใช้ :hover ของกล่องใหญ่สิครับ เพราะวัตุเล็กๆเป็น subset ของกล่องใหญ่ที่รวมมันไว้ซึ่งมีproperty ที่ต่างกันเท่านั้นเอง

  6. Melody Mew says:

    ขอบคุณสำหรับบทความให้ค.รู้ดีๆค่ะ

Leave a Reply