Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

CSS พื้นฐาน : CSS3 Transitions

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called CSS3 Mastery.
Quick Tip: Detect CSS3 Support in Browsers with JavaScript
Quick Tip: Ever Thought About Using @Font-face for Icons?

Thai (ภาษาไทย) translation by Porrapat Petchdamrongskul (you can also view the original English article)

จากการที่ CSS3 นั้นเป็นที่นิยมบนเว็บโดยทั่วไป มันยังให้สิ่งที่น่าสนใจ และ เทคนิคต่างๆ ตามมันออกมา วันนี้ เราจะมาทบทวนพื้นฐานของการใช้ CSS3 Transitions และ Animation เพื่อสร้างผลงานใหม่ๆ ที่ยอดเยี่ยมขึ้น

บทเรียนนี้มีวิดีโอสอนเพิ่มเติมพิเศษสำหรับสมาชิก Tuts+ Premium เท่านั้น

ขั้นที่ 1 - เชื่อม Transitions

เราจะเริ่มทำงานด้วยเทคนิคพื้นฐานบางอย่าง เริ่มแรกเลยคือการเปลี่ยนแปลงง่ายๆ กับสีตัวอักษร เมื่อผู้ใช้งาน hover เหนืออิลิเมนต์หนึ่งๆ

นี่แหละ เราเปลี่ยน text color ไปเป็นสีแดงเมื่อทำการ hover และด้วย CSS3 เพียงเล็กน้อย เราสามารถสร้างความ smooth ที่มากกว่าด้วยเอฟเฟ็กต์ที่ค่อยๆ เปลี่ยนสี

เราได้เพิ่ม css property, -webkit-transition จำไว้ว่า -webkit prefix นี้จะทำงานบน Webkit engine เช่น Safari หรือ Chrome เท่านั้น โชคเข้าข้าง บราวเซอร์สมัยใหม่อื่นๆ ก็มีการ implement ของตัวมันเองเช่นเดียวกัน สำหรับคำสั่งทั้งหมดที่ครอบคลุมทุกๆ บราวเซอร์นั้นจะแสดงตามด้านล่าง

โปรดสังเกตว่าในบทเรียนนี้ เราจะโฟกัสไปที่การแสดงผลของ webkit  หลังจากการประกาศ property เราได้มีค่า "color 1s ease-in" นี่คือการประกาศโดยย่อ ซึ่งสามค่านั้นแสดงถึง

  1. property ที่ต้องการให้เกิดจากเคลื่อนไหว (หรือเกิด transition)
  2. เวลาการเกิด transition
  3. ชนิดของ transition

ในกรณีนี้ เราได้เลือกใช้ transition ease-in ที่ซึ่งจะเริ่มเกิด transition แบบช้าๆ ก่อน จากนั้นค่อยๆ เร่งความเร็วขึ้นจนจบ


ขั้นที่ 2 - การทำ transition ของพื้นหลัง

พื้นฐานการใช้งานอื่นๆ เกี่ยวกับการเปลี่ยนสถานะคือ การเปลี่ยนพื้นหลังของ input box เมื่อเกิดการ focus

เวลานี้ เราจะประกาศ transition ในสถานะ hover state ดังนั้นเราจะไม่เพิ่ม class ที่ไม่จำเป็นเข้าไปที่ CSS เราจะใส่ transition เมื่อ input box นั้นได้รับการ focus


ขั้นที่ 3 - การทำ Transition บน Property หลายๆ ตัวพร้อมกัน

CSS transition นั้นค่อนข้างเป็นวิธีที่ตรงไปตรงมาในการเพิ่มลูกเล่นเข้ากับสถานะ hover จากของเดิมที่มีอยู่แล้ว และทำให้เว็บไซต์ของคุณนั้นสามารถใช้งาน CSS3 อย่างเต็มที่ได้

เพื่อที่จะก้าวหน้าไปมากกว่านี้ เราสามารถสร้าง transition CSS property หลายๆ ตัวได้โดยใช้ CSS3 transition แบบ longhand version

และในเวลานี้ พื้นหลังและ text color เปลี่ยนไปตามที่เรา hover ดังนั้นเราสามารถระบุ property ทั้งหลายเหล่านี้เข้ากับ transition ของเรา ง่ายๆ เพียงแค่แยก transition อย่างแรกเลยเรามี -webkit-transition-property และ แยกค่าต่างๆ กันด้วย comma ดังนั้นเราจะระบุสีและ property พื้นหลัง ตามลำดับ

จากนั้น เราจะตั้งค่าระยะเวลาของ transition โดยใช้

สิ่งเหล่านี้ถูกอ้างอิงในลำดับเดียวกันกับคำสั่งแรก ณ เวลานี้ อย่างไรก็ตาม ค่าทั้งสองนั้นถูกตั้งค่าไว้ที่ 1s

สุดท้ายแล้ว เราจะตั้งค่า timing function และตั้งค่า 2 ค่าที่แตกต่างกัน ค่าแรก linear เกี่ยวข้องกับตัวแปรแรกที่ถูกประกาศคือสี และค่าที่สองเกี่ยวข้องกับพื้นหลังที่เปลี่ยนแปลงได้

ดังนั้นเราจะตั้งค่าสีไปที่ linear เพื่อเปลี่ยนแปลงรายวินาที และ พื้นหลังให้ ease-in ให้เกิดขึ้นในช่วงเวลาเดียวกัน


ตัวอย่างวิดีโอฉบับเต็ม



ขั้นตอนที่ 4 - นำชิ้นส่วนต่างๆ มารวมเข้าด้วยกัน

CSS3 transition เริ่มต้นเข้ามาสู่พวกมันเองเมื่อพวกมันร่วมใช้กับ CSS property ใหม่ๆ

คุณสามารถรีวิวตัวอย่างของการใช้อิลิเมนต์ overlapping และ transition บน Andy Clarke's for a Beautiful Web

เริ่มสร้างตัวอย่างเล็กๆ น้อยๆ ของแอนนิเมชันด้วยป้ายสัญญาณที่เด้งขึ้นมา


อย่างแรกเราจะสร้างกล่องสี่เหลี่ยมสำหรับป้ายสัญญาณ จากนั้นใส่ relative position เพื่อให้แน่ใจว่าเราสามารถใช้ absolute position ภายในอิลิเมนต์นั้นได้

จากนั้นเราจะวางกล่องบนหน้าเว็บ และ ใส่ชิ้นส่วนของป้ายภายในนั้น

ถัดไป เสาถูกใส่ตำแหน่งด้วย z-index ที่มีค่า 2 หลังจากนั้นเราก็จะได้วางป้ายลงไปยังเสานั้น

และแล้ว เราได้เพิ่มป้าย จัดวางตำแหน่งภายใต้เสา และ หมุมมันด้วย CSS3 transform property

แผ่นป้ายถูกหมุนโดยใช้ -webkit-transform: rotate(86deg) และมันถูกจัดวางตำแหน่งภายในเสานั้น เพื่อให้แน่ใจว่าแผ่นป้ายนั้นถูกหมุนรอบๆ จุดที่สำคัญ เราจะเปลี่ยนค่า transform origin ไปที่มุมบนซ้าย 0,0


เราตั้งค่า transition เพื่อเปลี่ยนแปลง -webkit-transform property ที่ 0.5s ด้วย ease-in-out profile และบน hover เราจะหมุนป้ายกลับไปที่ตำแหน่งเดิมๆ ของมัน

เราจะทำสิ่งเหล่านี้เพื่อใส่ #signpost:hover แทนที่ hover บน #sign เอง


ขั้นที่ 5 - การทำ Animation


เราสามารถเริ่มประติดประต่อสิ่งเหล่านี้เข้าด้วยกัน โดยใช้ webkit animation ที่ซึ่งช่วยให้เรามีพลังที่จะสร้างสรรค์สิ่งเหล่านี้เช่นการหมุนอย่างต่อเนื่องเป็นต้น

เราเริ่มต้นโดยสร้างรูปภาพวงกลมสองอัน และ จัดวางตำแหน่งพวกมันภายใต้ div คอนเทนเนอร์ เหมือนกับที่เราทำที่แผ่นป้ายด้านบน

จากนี้ เราต้องการแนะนำ Animation เราจะหมุนวงกลมในตำแหน่งตรงกันข้าม ดังนั้นเราต้องการติดตั้ง Animation ทั้งสองที่

Animation นั้นได้รับการใส่ชื่อสำหรับอ้างอิง ในกรณีนี้ "spin" และ "spinrev" หลังจากนั้นเราจะใส่พวกมันที่ค่า to และ from ดังนั้นเราจะหมุนรูปภาพจาก 0 องศา ถึง 360 องศา โดยใช้ webkit transform และ ไปที่ -360 องศา สำหรับการหมุนกลับ

จากนั้น เราจะใส่แอนนิเมชั่นเหล่านี้ไว้ใน hover states จำไว้ว่า ถ้าเราใส่มันไว้ที่ normal state ตัว animation จะ run ทันทีเมื่อ page นั้นถูกโหลด

เราอ้างอิงชื่อแอนนิเมชันที่เราได้สร้างขึ้นมา (-webkit-animation-name: spin;) จากนั้น เราประกาศจำนวนครั้งที่เราต้องการให้แอนนิเมชันทำงาน (-webkit-animation-iteration-count: infinite;) ในกรณีนี้ ค่า infinite จะทำให้มันวิ่งไปเรื่อยๆ เมื่อ #circles div นั้นถูก hover อยู่

ถัดไปเราจะ set ค่า timing function (-webkit-animation-timing-function: linear;) และ สุดท้าย เราจะเซ็ตค่าระยะเวลาของแต่ละการหมุน ในกรณีนี้คือ 10 วินาที (-webkit-animation-duration: 10s;) และ 5 วินาทีสำหรับวงรอบที่สมบูรณ์


ขั้นที่ 6 - Graceful Degredation ด้วย Modenizr

หลังจากที่ทุกอย่างสามารถทำงานได้ตามที่ต้องการแล้ว เราต้องแน่ใจว่าผู้ใช้ของเราสามารถเห็นได้แม้ว่าพวกเขาไม่มีบราวเซอร์ที่รองรับ CSS3 ก็ตาม วิธีการก็ง่ายมาก โดยการใช้ JavaScript library ชื่อ Modernizr ที่ซึ่งเพิ่ม class ไปที่อิลิเม้นต์ HTML ตามที่บราวเซอร์นั้นรองรับ

จากการทำป้ายตัวอย่างด้านบน บราวเซอร์ที่ไม่สนับสนุน CSS transform จะไม่มีการวางป้ายบนเสาอย่างถูกต้อง ดังนั้นเราจะระบุบราวเซอร์เหล่านั้นให้ซ่อนป้ายจนกว่าจะมีการ hover เกิดขึ้น

มันง่ายแค่เชื่อม Modernizr script ค้นหาชื่อ class ที่เกี่ยวข้อง จากนั้นสร้างคำสั่ง CSS ขึ้นมาสำหรับกรณีนั้นๆ


ส่งท้าย

ก็เท่านั้นแหละ ผมหวังว่าคุณจะชอบมันนะ บอกให้ผมรู้ละกัน ถ้าคุณมีคำถามหรือต้องการชี้แนะ ก็ทำที่ช่องด้านล่างได้เลย

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.