วิธีใช้การเปลี่ยนและการแปลง CSS3 เพื่อสร้างภาพเคลื่อนไหว

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

วิธีใช้การแปลง CSS3

มีการแปลงที่ใช้กันทั่วไปอยู่สองสามประเภท เราจะมุ่งเน้นไปที่ตัวอย่าง 2 มิติสำหรับบทช่วยสอนนี้ แต่ควรตระหนักไว้เสมอว่าสิ่งดีๆ สามารถทำได้ด้วยการแปลงร่าง 3 มิติเช่นกัน (เมื่อคุณเชี่ยวชาญ 2D แล้ว 3D จะง่ายขึ้นมาก!)

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

แปลภาษา

เมธอด translate() จะย้ายองค์ประกอบจากตำแหน่งปัจจุบันไปยังตำแหน่งใหม่
ด้วยโค้ดนี้ สี่เหลี่ยมที่ปรับแล้วจะถูกย้ายไปทางขวา 40 พิกเซล และเลื่อนลงมาจากตำแหน่งปัจจุบัน 100 พิกเซล

 -ms-transform: translate(40px, 100px); /* IE 9 */ -webkit-transform: translate(40px, 100px); /* Safari */ transform: translate(40px, 100px);

หมุน

วิธี rotate() จะหมุนองค์ประกอบตามเข็มนาฬิกาหรือทวนเข็มนาฬิกาตามค่าองศาที่ระบุ รหัสนี้หมุนสี่เหลี่ยมผืนผ้าตามเข็มนาฬิกา 40 องศา

 -ms-transform: rotate(40deg); /* IE 9 */ -webkit-transform: rotate(40deg); /* Safari */ transform: rotate(40deg);

มาตราส่วน

scale() วิธีการเพิ่มหรือลดขนาดขององค์ประกอบ (ตามพารามิเตอร์ที่กำหนดสำหรับความกว้างและความสูง) ในตัวอย่างนี้ สี่เหลี่ยมที่ปรับแล้วจะมีความกว้างมากกว่าความกว้างเดิมสองเท่าและใหญ่กว่าความสูงเดิมสามเท่า

 -ms-transform: scale(2, 3); /* IE 9 */ -webkit-transform: scale(2, 3); /* Safari */ transform: scale(2, 3);

สกิวX

ด้วย skewX() เฉพาะแกน x เท่านั้นที่จะได้รับผลกระทบ สี่เหลี่ยมผืนผ้านี้เอียง 30 องศาตามแกน x:

 -ms-transform: skewX(30deg); /* IE 9 */ -webkit-transform: skewX(30deg); /* Safari */ transform: skewX(30deg);

เบ้

นี่เป็นแนวคิดเดียวกัน แต่อยู่บนแกน y เมธอด skewY() เอียงองค์ประกอบตามแกน y ตามมุมที่กำหนด สี่เหลี่ยมผืนผ้านี้เอียง 30 องศาตามแกน y

 -ms-transform: skewY(30deg); /* IE 9 */ -webkit-transform: skewY(30deg); /* Safari */ transform: skewY(30deg); }

ลาด

หากคุณต้องการเอียงทั้งแกน x และ y สามารถทำได้ในที่เดียว เมธอด skew() จะเอียงองค์ประกอบตามแกน x และ y โดยใช้มุมที่ระบุ ตัวอย่างต่อไปนี้เอียงองค์ประกอบสี่เหลี่ยมผืนผ้า 30 องศาตามแนวแกน x และ 20 องศาตามแนวแกน x

 -ms-transform: skew(30deg, 20deg); /* IE 9 */ -webkit-transform: skew(30deg, 20deg); /* Safari */ transform: skew(30deg, 20deg);

เมทริกซ์

นี่คือสิ่งที่น่าสนใจ แต่ยังมีประสิทธิภาพมากขึ้นในสถานการณ์ที่เหมาะสม หากคุณกำลังทำการแปลงจำนวนมากและไม่ต้องการเขียนออกมาทีละรายการ การแปลง 2 มิติเหล่านี้สามารถใช้ร่วมกับ matrix() เมธอดได้

นี่คือโครงร่างพื้นฐานที่ต้องปฏิบัติตาม:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

โปรดทราบว่าต้องใช้การวิจัยเพื่อหาค่าในเมทริกซ์ นี่คือคำแนะนำที่เป็นประโยชน์ในการเริ่มต้น

ในการสร้างตัวอย่าง ต่อไปนี้คือค่าเมทริกซ์:

 -ms-transform: matrix(2, -0.3, 0, 1, 0, 0); /* IE 9 */ -webkit-transform: matrix(2, -0.3, 0, 1, 0, 0); /* Safari */ transform: matrix(2, -0.3, 0, 1, 0, 0);

วิธีใช้การเปลี่ยน CSS3

เมื่อครอบคลุมการแปลงแล้ว สิ่งสำคัญคือต้องทราบว่ามักใช้กับการเปลี่ยนรูป ซึ่งจะเหมาะสมกว่าในตัวอย่างการออกแบบต่อไปนี้

โปรดทราบว่าค่าต่างๆ สามารถปรับแต่งได้เพื่อให้การเปลี่ยนแปลงระหว่างสองสถานะขององค์ประกอบเป็นไปตามที่คุณต้องการ คิดว่าเป็นวิธีการควบคุมความเร็วของภาพเคลื่อนไหวเมื่อเปลี่ยนคุณสมบัติ CSS ตัวอย่างหนึ่งที่คุณอาจเคยเจอคือเมื่อคุณวางเมาส์เหนือปุ่ม เป็นเรื่องปกติที่จะเห็น "มืดลงอย่างช้าๆ" แทนที่จะเป็นสีเข้มขึ้นอย่างรวดเร็วเมื่อคุณวางเมาส์เหนือ “การทำให้มืดลงอย่างช้าๆ” นี้ถูกสร้างขึ้นด้วยการเปลี่ยนภาพ

หากคุณระบุค่าจำนวนมาก การจดชวเลขจะมีประโยชน์ คุณสมบัติ CSS transition เป็นคุณสมบัติชวเลขสำหรับ transition-property transition-duration transition-timing-function และ transition-delay

รายละเอียดการเปลี่ยนแปลง

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

transition-duration จะช่วยให้การเปลี่ยนแปลงในพร็อพเพอร์ตี้เกิดขึ้นในช่วงเวลาที่กำหนดแทนที่จะทันทีทันใด คุณจะเห็นวินาทีและมิลลิวินาทีเป็นค่าที่เป็นไปได้

 transition-duration: 7s; transition-duration: 120ms; transition-duration: 2s, 3s; transition-duration: 10s, 30s, 230ms;

คุณสมบัติ CSS transition-timing-function ช่วยให้คุณสร้างเส้นโค้งการเร่งความเร็ว เพื่อให้ความเร็วของทรานซิชันสามารถเปลี่ยนแปลงได้ตามระยะเวลา มีตัวเลือกมากมายให้ทดลอง

 transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

transition-delay ค่อนข้างอธิบายได้ด้วยตนเอง ค่าที่ระบุกำหนดจำนวนวินาทีหรือมิลลิวินาทีเพื่อรอก่อนที่เอฟเฟ็กต์การเปลี่ยนแปลงจะเริ่มขึ้น Initial จะตั้งค่าคุณสมบัติเป็นค่าเริ่มต้น หากมีการระบุ inherit หมายความว่าจะสืบทอดคุณสมบัติจากองค์ประกอบหลัก

 Here are all the properties: transition-property: background; //all transition-duration: 1s; transition-timing-function: linear; //other options are ease transition-delay: 0.5s;

ต่อไปนี้คือการตั้งค่าชวเลขพื้นฐานสำหรับการเปลี่ยนผ่าน:

 div { transition: [property] [duration] [timing-function] [delay]; }

ลำดับชวเลขแบบเต็ม:

 div { transition: background 1s linear 0.5s; }

การวางแผนแอนิเมชั่น

ก่อนที่คุณจะสร้างแอนิเมชั่นที่มีรายละเอียดจริงๆ คุณควรถอยออกมาหนึ่งก้าวก่อนที่จะสร้างบางสิ่งที่บ้าคลั่งโดยสิ้นเชิง ไม่มีอะไรผิดที่จะเพิ่มลูกเล่นสนุกๆ ลงไป แต่มันดึงดูดให้เคลื่อนไหวมากเกินไป การเคลื่อนไหวที่คุณสร้างขึ้นควรสื่อความหมายและปรับปรุงประสบการณ์ของผู้ใช้ ไม่ใช่เบี่ยงเบนความสนใจจากมัน จากที่กล่าวมา ได้เวลาสร้างแล้ว!

ฉันอยากจะบอกว่ามีภาพเคลื่อนไหว gif ในบทช่วยสอนนี้เพื่อแสดงภาพเคลื่อนไหว gif นั้นเกิดขึ้นซ้ำๆ ซึ่งโดยปกติแล้วจะไม่ถูกนำมาใช้กับงานออกแบบ จุดประสงค์ของการทำซ้ำนั้นมีวัตถุประสงค์เพื่อการสาธิตเท่านั้น

การย้ายรูปภาพด้วย CSS Transform Property

ก่อนที่เราจะเข้าสู่การแปลงและการเปลี่ยนที่ซับซ้อน เรามาพูดถึงพิกัดบนกริดแกนกันก่อน (โปรดทราบ: นี่อาจทำให้ความทรงจำเกี่ยวกับกระดาษกราฟจากรายวิชาคณิตศาสตร์กลับคืนมา) พิกัดใช้เพื่อย้ายภาพ

พิกัด X และ Y

สิ่งต่าง ๆ จะดูแตกต่างจากที่คุณคาดไว้เล็กน้อย ค่า -y อยู่เหนือแกน x HTML และ CSS ใช้สิ่งที่เรียกว่า "ระบบพิกัดคาร์ทีเซียนกลับด้าน" เนื่องจากหน้าเว็บเริ่มต้นจากบนซ้ายและอ่านลงด้านล่าง

แอนิเมชัน 1: การแปลงพื้นฐานพร้อมการเคลื่อนไหวในแนวนอน

เราได้กล่าวถึงฐานของ translate() และวิธีที่มันสามารถย้ายองค์ประกอบได้ เมื่อนำไปใช้จริง มันสามารถลอยเรือของคุณได้อย่างแท้จริง ดังที่เราได้เรียนรู้ข้างต้น เมธอด translate() จะย้ายองค์ประกอบจากตำแหน่งปัจจุบัน (ตามพารามิเตอร์ที่กำหนดสำหรับแกน x และแกน y)

โครงการแรกจะย้ายกราฟิกเรือดำน้ำ เรือดำน้ำจำเป็นต้องขึ้นมาเพื่อออกอากาศในบางครั้ง ดังนั้นเราจะจัดรูปแบบอย่างระมัดระวังด้วย translate()

หากต้องการย้ายจากตำแหน่งเริ่มต้นโดยใช้ transform: translate(x,y) จะต้องระบุค่าใหม่สองค่า ในการทำให้เรือดำน้ำเคลื่อนที่ไปทางขวาและขึ้น ค่า x ควรเป็นค่าบวกและค่า y ควรเป็นค่าลบ ถ้าค่า y ถูกตั้งค่าเป็น 0 มันจะเลื่อนไปทางขวาเท่านั้นและไม่ขึ้น

เรือดำน้ำกำลังขึ้นสู่อากาศด้วยการแปลงร่าง ()

ในตัวอย่างนี้ เราจะย้ายวัตถุไปทางขวา 200px และขึ้นไปอีก 25px ไวยากรณ์คือ transform: translate(200px,-25px); และวัตถุจะเคลื่อนที่เมื่อลอยอยู่เหนือ .underwater ด้วยการสร้างสไตล์สำหรับการเคลื่อนไหวใน .underwater:hover .move-right การกระทำจะเกิดขึ้นเมื่อโฮเวอร์

นี่คือ HTML เริ่มต้น:

 <div class="underwater"> <div class="object submarine move-right"> <!-- image is set as a background image on submarine --> </div> </div>

ดูสิ่งนี้ใน Codepen

ไม่ต้องใช้ CSS มากนักในการสร้างแอนิเมชั่นพื้นฐานนี้:

 .underwater { position: relative; min-height: 600px; background-color: #4fc3da; } .underwater:hover .move-right{ transform: translate( 200px ,-25px ); -webkit-transform: translate( 200px ,-25px ); /** Chrome & Safari **/ -ms-transform: translate( 200px ,-25px ); /** Firefox **/ } .submarine { height: 200px; background: url("little-submarine.svg") no-repeat; } .object { transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -ms-transition: all 2s ease-in-out; /** Opera **/ }

อย่างที่คุณเห็น พิกัดของเราจะอยู่ในช่องสี่เหลี่ยมด้านขวาบน เมื่อโฉบลง เรือดำน้ำจะเคลื่อนที่ขึ้นไปยังพิกัดใหม่เนื่องจากการเปลี่ยนรูป

สิ่งต่าง ๆ ดูราบรื่นเนื่องจากการเปลี่ยนแปลง transition-duration ถูกกำหนดไว้ที่ 2sec ซึ่งไม่เร็วเกินไปสำหรับแอนิเมชั่นนี้ transition-timing-function ถูกตั้งค่าให้ ease-in-out ซึ่งทำให้เริ่มต้นและสิ้นสุดช้าลง ถ้าเพิ่มระยะเวลาให้ใหญ่ขึ้น นี่จะชัดเจนมาก

แอนิเมชันพื้นฐาน 2: การเคลื่อนไหวในแนวนอนด้วยคีย์เฟรมและแอนิเมชัน

การแปลงถูกใช้แตกต่างกันเล็กน้อยในตัวอย่างนี้ คีย์เฟรมและคุณสมบัติแอนิเมชันจะถูกใช้เพื่อสร้างแอนิเมชันถัดไป

ข้อมูลพื้นฐานเกี่ยวกับคีย์เฟรม

ภายใน @keyframes คือที่ที่คุณกำหนดสไตล์และขั้นตอนสำหรับภาพเคลื่อนไหว ต่อไปนี้คือตัวอย่างที่เราจะใช้ซึ่งจะช่วยให้เอฟเฟกต์ "จางลงขณะเคลื่อนที่ลง":

 @keyframes fadeInDown { 0% { opacity: .8; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(0, 30px); } }

ค่าการแปลงจะรวมอยู่ในคีย์เฟรม ตำแหน่งเดิมตั้งไว้ที่ 0% และที่ 100% ตำแหน่งจะเลื่อนลง 30px

พื้นฐานแอนิเมชั่น

หากต้องการใช้ภาพเคลื่อนไหว CSS3 คุณต้องระบุคีย์เฟรมสำหรับภาพเคลื่อนไหว

เช่นเดียวกับการออกแบบข้างต้น @keyframes จะกำหนดรูปแบบที่องค์ประกอบจะมีในบางช่วงเวลา

เมื่อใดก็ตามที่คุณทำเช่นนี้ ตรวจสอบให้แน่ใจว่าได้ตั้งชื่อที่สื่อความหมายให้กับภาพเคลื่อนไหว ในกรณีนี้ เรากำลังใช้ fadeOut คลาสใด ๆ ที่มี fadeOut จะถูกนำไปใช้ ในขั้นตอนของภาพเคลื่อนไหว ตั้งค่า "จาก" เป็น 0% และ "ถึง" ตั้งค่าเป็น 100% ตัวอย่างนี้ค่อนข้างง่ายโดยมีเพียงสองขั้นตอน แต่สามารถเพิ่มขั้นตอนอื่น ๆ ในระหว่างนี้ได้

การดำเนินการเฉพาะที่มีคุณสมบัติย่อยของแอนิเมชัน

คุณสมบัติภาพเคลื่อนไหวใช้เพื่อเรียก @keyframes ภายในตัวเลือก CSS ภาพเคลื่อนไหวสามารถและมักจะมีคุณสมบัติย่อยมากกว่าหนึ่งรายการ

คีย์เฟรมกำหนดว่าภาพเคลื่อนไหวจะมีลักษณะอย่างไร คุณสมบัติย่อยกำหนดกฎเฉพาะสำหรับภาพเคลื่อนไหว เวลา ระยะเวลา และรายละเอียดสำคัญอื่นๆ เกี่ยวกับความคืบหน้าของลำดับแอนิเมชันจะรวมอยู่ในคุณสมบัติย่อยทั้งหมด

ต่อไปนี้เป็นตัวอย่างคุณสมบัติย่อยของภาพเคลื่อนไหว:

• ชื่อภาพเคลื่อนไหว: ชื่อของ @keyframesat-rule ซึ่งอธิบายถึงคีย์เฟรมของภาพเคลื่อนไหว ชื่อ fadeOut ในตัวอย่างก่อนหน้านี้คือตัวอย่างของ animation-name
• ระยะเวลาของแอนิเมชัน: ระยะเวลาที่แอนิเมชันควรใช้เวลานานในการทำให้ครบหนึ่งรอบ
• ฟังก์ชันการจับเวลาแอนิเมชัน: การกำหนดเวลาของแอนิเมชัน โดยเฉพาะวิธีที่แอนิเมชันเปลี่ยนผ่านคีย์เฟรม ฟังก์ชันนี้มีความสามารถในการสร้างเส้นโค้งการเร่งความเร็ว ตัวอย่างเป็น linear , ease , ease-in , ease-out , ease-in-out หรือ cubic-bezier
• การหน่วงเวลาของภาพเคลื่อนไหว: การหน่วงเวลาระหว่างเวลาที่โหลดองค์ประกอบและจุดเริ่มต้นของภาพเคลื่อนไหว
• Animation-iteration-count: จำนวนครั้งที่แอนิเมชั่นควรเล่นซ้ำ ต้องการให้อนิเมชั่นดำเนินต่อไปตลอดไปหรือไม่? คุณสามารถกำหนด infinite เพื่อทำซ้ำแอนิเมชันอย่างไม่มีกำหนด
• ทิศทางของแอนิเมชั่น: สิ่งนี้กำหนดว่าแอนิเมชั่นควรสลับทิศทางในแต่ละการวิ่งผ่านลำดับหรือรีเซ็ตเป็นจุดเริ่มต้นและทำซ้ำ
• Animation-fill-mode: ค่าที่แอนิเมชั่นนำไปใช้ทั้งก่อนและหลังการดำเนินการ
• สถานะการเล่นภาพเคลื่อนไหว: ด้วยตัวเลือกนี้ คุณจะสามารถหยุดชั่วคราวและเล่นลำดับภาพเคลื่อนไหวต่อได้ ตัวอย่าง none forwards backwards หรือ both

 .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; animation-iteration-count: 1; }

นี่คือลักษณะที่เขียนเป็นชวเลข:

 animation: 4s ease-in-out 1 paused fadeInDown;

นี่คือโครงสร้าง HTML:

 <div class="underwater"> <div class="content-wrap fadeInDown"> <div class="submarine"></div> <h2>Cute Submarine</h2> <p>Text here.</p> </div> </div>

คลาสของ fadeInDown กำลังทำให้เรือดำน้ำและเนื้อหาเลื่อนขึ้นและลง

ทำให้ภาพเคลื่อนไหวราบรื่นขึ้นโดยการปรับคีย์เฟรม

ด้วยคีย์เฟรมอีกสองสามคีย์ เราสามารถทำให้แอนิเมชันราบรื่นขึ้นมาก

 @keyframes fadeInDown { 0% { opacity: .8; transform: translateY(5px); } 25% { opacity: .9; transform: translateY(15px); } 50% { opacity: 1; transform: translateY(30px); } 75% { opacity: 1; transform: translateY(15px); } 100% { opacity: .9; transform: translateY(0); } }

ดูสิ่งนี้ใน Codepen

การปรับเวลาของภาพเคลื่อนไหว

การเพิ่มคีย์เฟรมช่วยให้ภาพเคลื่อนไหวราบรื่นขึ้น แต่เราสามารถเพิ่มการโต้ตอบได้มากขึ้นเล็กน้อยด้วยคีย์เฟรมมากขึ้นและการหน่วงเวลาข้อความใน div ที่มีข้อความทั้งหมด การทำให้เรือดำน้ำกระเด็นออกจากข้อความเป็นเรื่องสนุก ดังนั้นการมีดีเลย์สอดคล้องกับการเคลื่อนไหวของเรือดำน้ำจึงช่วยให้ทำเช่นนั้นได้

HTML จะใช้คลาสที่มีประสิทธิภาพ:

 <div class="underwater"> <div class="submarine move-down fadeInDown"> </div> <div class="moving-content move-down text-delay fadeInDownText"> <p>Text goes here.</p> </div> </div>

และนี่คือ CSS ที่อัปเดตซึ่งอนุญาตให้ใช้แอนิเมชันแบบโต้ตอบ:

 @keyframes fadeInDown { 0% { opacity: .8; transform: translateY(0); } 25% { opacity: 1; transform: translateY(15px); } 50% { opacity: 1; transform: translateY(30px); } 75% { opacity: 1; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInDownText { 0% { opacity: .8; transform: translateY(0); } 100% { opacity: 1; transform: translateY(35px); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .fadeInDownText { -webkit-animation-name: fadeInDownText; animation-name: fadeInDownText; } .move-down{ -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1 } .text-delay { -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */ animation-delay: 2s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }

ดูสิ่งนี้ใน Codepen

แถบความคืบหน้าลูกบาศก์เบซิเยร์ในแอนิเมชั่น CSS3

ถึงเวลาฉลองความคืบหน้าของแอนิเมชั่นด้วยการสร้างแถบความคืบหน้า!

แนวคิดทั้งหมดที่เรากล่าวถึงจะมารวมกันเพื่อสร้างสิ่งนี้ แถบความคืบหน้าเป็นองค์ประกอบ UI ทั่วไป ดังนั้นการสร้างสิ่งที่ใช้งานได้เช่นนี้จะช่วยให้คุณเห็นว่าองค์ประกอบเว็บอื่นๆ สามารถเคลื่อนไหวได้อย่างไร

นี่คือ HTML เริ่มต้น:

 <div class="container"> <div class="row"> <div class="masthead"> <p>CSS3 Loading Bar</p> </div> </div> <div class="fast-loader"></div> </div>

และ CSS ที่จะทำให้มันมีชีวิตขึ้นมา:

 @keyframes speedSetting { 0% { width: 0px; } 100% { width: 100%; } } @keyframes progressMotion { 0% { opacity: 1; } 50% {opacity: 1; } 100% { opacity: 0; } } .fast-loader { width: 0px; height: 10px; background: linear-gradient(to left, blue,rgba(255,255,255,.0)); animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite; -webkit-animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite; }

ในคีย์เฟรมชุดแรก ความกว้างจะอยู่ระหว่าง 0 ถึง 100% โดยมีระยะเวลา 2 วินาที คีย์เฟรมที่ progressMotion อยู่กำลังควบคุมความทึบ

CSS Bezier Curve

สามารถใช้ฟังก์ชัน cubic-bezier() กับคุณสมบัติ transition-timing-function เพื่อควบคุมว่าการเปลี่ยนจะเปลี่ยนความเร็วอย่างไรในช่วงระยะเวลาหนึ่ง คุณจะเห็นสิ่งนี้ในภาพเคลื่อนไหว ดูว่ามันเริ่มต้นช้าลงเล็กน้อยแล้วก้าวขึ้นได้อย่างไร

การนึกภาพกระดาษห่อเบซิเยร์เป็นสี่เหลี่ยมจัตุรัสจะเป็นประโยชน์ ด้านซ้ายล่างและด้านขวาบนเป็นที่ที่มีจุดสำคัญ ซึ่งก็คือ P0 และ P3 สิ่งเหล่านี้ถูกกำหนดเป็น (0,0) และ (1,1) เสมอ ซึ่งจะไม่เปลี่ยนแปลง อย่างไรก็ตาม คุณสามารถย้าย P1 และ P2 ได้ด้วยฟังก์ชัน cubic-bezier() หากคุณระบุจุดใหม่ด้วยค่า x หรือ y

• x1 คือพิกัด x ของจุดควบคุม p1
• y1 คือพิกัด y ของจุดควบคุม p1
• x2 คือพิกัด x ของจุดควบคุม p2
• y2 คือพิกัด y ของจุดควบคุม p2

นี่คือค่าตัวอย่างบางส่วน:

x1 = .7
y1 = .16
x2 = .2
y2 = .9

ตัวอย่างอาจมีลักษณะดังนี้:

 cubic-bezier(.7,.16,.2,.9)

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