และนั่นมัน! เรามาดูกันว่าในความเป็นจริงมีลักษณะอย่างไร

ตอนแรก มาร์กอัป HTML- ง่ายมากเพราะเรากำลังทำงานกับองค์ประกอบเดียวต่อหน้าเท่านั้น

1	<คลาส div = "toSmallWidth" >

และนี่คือสิ่งที่อยู่ในไฟล์สไตล์:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth ( ระยะขอบ : 20px อัตโนมัติ ; /*ระยะขอบภายนอกที่ด้านบนและด้านล่างของ 20px และการจัดตำแหน่งตรงกลาง*/พื้นหลัง:สีแดง; /*พื้นหลังสีแดงของบล็อก*/ความสูง: 100px; /*บล็อกสูง 100px*/ความกว้าง: 800px; /*ความกว้างเริ่มต้น 800px*/-webkit-animation-name : animWidthSitehere; -webkit-ภาพเคลื่อนไหว-ระยะเวลา : 5s; /* คุณสมบัติที่มีคำนำหน้าสำหรับ เบราว์เซอร์ Chrome, ซาฟารี, โอเปร่า */ชื่อแอนิเมชั่น : animWidthSitehere; /* ระบุชื่อคีย์เฟรม (อยู่ด้านล่าง)*/ภาพเคลื่อนไหว-ระยะเวลา: 5s; /*กำหนดระยะเวลาของภาพเคลื่อนไหว*/ } /* คีย์เฟรมพร้อมคำนำหน้าสำหรับเบราว์เซอร์ Chrome, Safari, Opera */ @-webkit-keyframes animWidthSitehere (จาก (กว้าง: 800px;) ถึง (กว้าง: 100px;)) @keyframes animWidthSitehere (จาก (กว้าง: 800px;) /*อันดับแรก คีย์เฟรมโดยที่ความกว้างของบล็อกคือ 800px*/ถึง (กว้าง: 100px;) /*คีย์เฟรมสุดท้าย โดยที่ความกว้างของบล็อกคือ 100px*/ }

อย่างที่คุณเห็น เราได้ระบุเฉพาะคีย์เฟรมแรกและคีย์เฟรมสุดท้าย และคีย์เฟรมกลางทั้งหมดจะถูก "สร้าง" โดยอัตโนมัติ

ภาพเคลื่อนไหว CSS3 แรกของคุณพร้อมแล้ว เพื่อรวบรวมความรู้ที่ได้รับมาสร้างสรรค์ เอกสาร HTMLและ ไฟล์ซีเอสเอสและแทรกไปที่นั่น (a ดีกว่าด้วยมือของคุณ print) โค้ดจากตัวอย่าง แล้วคุณจะเข้าใจทุกอย่างอย่างแน่นอน จากนั้นลองเช่นเดียวกันกับความสูงของบล็อก (ควรลดความสูงลง) เพื่อยึดวัสดุ

3. ตัวอย่างภาพเคลื่อนไหว CSS3 ที่ซับซ้อนยิ่งขึ้น

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

3 บทเรียนเกี่ยวกับภาพเคลื่อนไหว CSS (การแปลง)

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

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

พื้นฐานการสร้าง

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

เอฟเฟกต์การเปลี่ยนแปลงนั้นถูกสร้างขึ้นโดยใช้ @keyframes

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

ดังนั้นก่อนอื่นเราต้องอธิบายก่อน การเปลี่ยนแปลงที่จำเป็นใน @keyframes มาดูวิธีใช้งานคีย์เฟรมกันดีกว่า

@keyframes ไวยากรณ์

ที่จริงแล้วมันจะง่ายกว่าสำหรับฉันที่จะอธิบายทุกอย่างให้คุณฟัง ตัวอย่างที่เสร็จแล้วแม้ว่าจะเป็นเรื่องง่ายมากก็ตาม นี่คือ (โค้ดถูกเพิ่มลงในไฟล์ css):

@keyframes พัลส์ ( 0% (ขนาดตัวอักษร: 50px;) 50% (ขนาดตัวอักษร: 60px;)) 100% (ขนาดตัวอักษร: 50px;))

@คีย์เฟรมพัลส์ ( 0% (ขนาดตัวอักษร: 50px;) 50% (ขนาดตัวอักษร: 60px;))

ดังนั้น หลังจากคีย์เวิร์ด @keyframes จะมีคำที่กำหนดเองซึ่งจะทำหน้าที่เป็นชื่อของภาพเคลื่อนไหว ในกรณีของเราคือ "ชีพจร" เปิดต่อไป วงเล็บปีกกาที่พวกเขาเขียน กฎที่จำเป็น.

เปอร์เซ็นต์คือสิ่งที่เรียกว่าการประทับเวลาซึ่งจะเพิ่มคุณสมบัติที่ระบุลงในองค์ประกอบ ในกรณีของเราสิ่งที่เขียนหมายถึงสิ่งต่อไปนี้: ที่จุดเริ่มต้นของการดำเนินการขนาดตัวอักษรจะเป็น 50 พิกเซลตรงกลางจะเพิ่มเป็น 60 และในตอนท้ายมันจะลดขนาดเป็นขนาดเริ่มต้นอีกครั้ง

คำหลักจาก และ ถึง สามารถแทนที่สัญลักษณ์เปอร์เซ็นต์ โดยระบุ 0% และ 100% ตามลำดับ นั่นคือจุดเริ่มต้นและจุดสิ้นสุดของการเล่น

นำแอนิเมชั่นไปสู่การปฏิบัติ

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

เลือกองค์ประกอบที่จะใช้

เชื่อมโยงกับกฎที่อธิบายผ่าน @keyframes (ผ่านชื่อ) และตั้งค่าด้วย การตั้งค่าเพิ่มเติมในกรณีที่จำเป็น.

มาลองกัน

ในไฟล์ html ของฉัน ฉันสร้างบล็อกที่มีคลาส shadow ซึ่งประกอบด้วย สตริงง่ายๆข้อความ. เป้าหมายของเราคือการสมัคร เอฟเฟกต์ภาพเคลื่อนไหวที่เราอธิบายไว้ก่อนหน้านี้ถึงสิ่งนี้ องค์ประกอบข้อความ.

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

ดังนั้น นอกเหนือจากสไตล์ที่บล็อกของเรามีอยู่แล้ว เรายังเพิ่มสไตล์ใหม่อีกด้วย:

ชื่อแอนิเมชัน: ชีพจร; ภาพเคลื่อนไหว-ระยะเวลา: 2s;

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

แอนิเมชั่นที่ไม่มีที่สิ้นสุดใน CSS3

ใช้งานได้ง่ายมากโดยใช้คุณสมบัติเดียวกันนี้ ในความเป็นจริง คุณสามารถกำหนดจำนวนการทำซ้ำเป็นสองสามพันครั้งได้ ซึ่งก็เพียงพอแล้ว แต่ในทางทฤษฎีแล้ว แอนิเมชันของเราจะไม่เกิดซ้ำอย่างไม่มีกำหนด

ภาพเคลื่อนไหวซ้ำนับ: อนันต์;

แอนิเมชั่น - การวนซ้ำ - นับ : อนันต์ ;

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

ล่าช้าก่อนเริ่ม

ตามค่าเริ่มต้น การเล่นจะเริ่มหลังจากนั้น โหลดเต็มหน้า พฤติกรรมนี้สามารถควบคุมได้โดยใช้คุณสมบัติ Animation-delay ค่าของมันถูกระบุเป็นวินาที

ทิศทาง

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

@keyframes พัลส์ ( 0% (ขนาดตัวอักษร: 50px;) 50% (ขนาดตัวอักษร: 60px;) 70% (ขนาดตัวอักษร: 80px;) 100% (ขนาดตัวอักษร: 50px;))

@คีย์เฟรมพัลส์ ( 0% (ขนาดตัวอักษร: 50px;) 50% (ขนาดตัวอักษร: 60px;) 70% (ขนาดตัวอักษร: 80px;) 100% (ขนาดตัวอักษร: 50px;))

ดังนั้นตามทิศทางปกติในครึ่งแรกของภาพเคลื่อนไหว ขนาดตัวอักษรจะเพิ่มขึ้นเป็น 60 พิกเซล จากนั้นจะเพิ่มขึ้นอย่างรวดเร็วอีกครั้งเป็น 80 หลังจากนั้นจะกลับมาเป็น ตำแหน่งเริ่มต้น.

ข้าว. 2. ขนาดเดิมข้อความ

ข้าว. 3. ขนาดตัวอักษรเกือบจะอยู่ที่ส่วนท้ายของภาพเคลื่อนไหว ก่อนที่จะกลับสู่สถานะเดิมทันที

ตอนนี้เราถาม:

ทิศทางแอนิเมชั่น: ย้อนกลับ;

แอนิเมชั่น - ทิศทาง : ย้อนกลับ ;

ทุกอย่างกลับหัวกลับหาง ขั้นแรก ข้อความจะเพิ่มขึ้นมากถึง 30 พิกเซล สูงสุด 80 และสำหรับภาพเคลื่อนไหวที่เหลือ ข้อความจะค่อยๆ ลดลง และกลับสู่ขนาดเดิมในที่สุด มันง่ายมาก

แบบฟอร์มแอนิเมชั่น

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

ก่อนการถือกำเนิดของ CSS3 คำว่า "แอนิเมชั่น" ทำให้นักออกแบบเลย์เอาต์ต้องเหงื่อตก และทั้งหมดเป็นเพราะในสมัยนั้นเป็นไปไม่ได้ที่จะสร้างแอนิเมชั่นคุณภาพสูงและสวยงาม งานจิ๊บจ๊อย- CSS ไม่สามารถทำได้ ดังนั้นภาพเคลื่อนไหวทั้งหมดจึงทำใน JavaScript จำเป็นต้องกรองฟอรั่มต่างๆ ค้นหาสหายกลุ่มเดียวกันที่โชคร้าย ใช้เวลาส่วนใหญ่ในการพัฒนา และท้ายที่สุดก็ได้ยินจากนักออกแบบ: "เอาล่ะ เท่านี้ก็จะสำเร็จ" และเมื่อ CSS3 ออกมาในที่สุด ดอกไม้ไฟก็ไม่หยุดจนกระทั่งเช้า และแชมเปญก็ไหลราวกับแม่น้ำ เป็นวันที่ดีสำหรับนักพัฒนาเว็บทุกคน (วันถัดไปคือวันที่ Microsoft ประกาศสิ้นสุดการสนับสนุน อินเทอร์เน็ตเอ็กซ์พลอเรอร์- ด้วยการถือกำเนิดของ CSS3 งานที่ซับซ้อนก่อนหน้านี้หลายอย่างกลายเป็นเรื่องง่ายและสนุกสนานในการทำงาน เช่นเดียวกับภาพเคลื่อนไหวใน CSS ซึ่งฉันจะพูดถึงในบทความนี้

การเปลี่ยน CSS

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

เมื่อคุณวางเคอร์เซอร์ไว้เหนือสี่เหลี่ยม สีพื้นหลังจะเปลี่ยนไปอย่างราบรื่น

ตอนนี้เรามาดูวิธีจัดการการเปลี่ยนผ่านใน CSS กันดีกว่า เรามีคุณสมบัติเพียง 5 ประการที่ช่วยให้เราสามารถควบคุมภาพเคลื่อนไหวการเปลี่ยนแปลงได้:

• การเปลี่ยนแปลงทรัพย์สิน;
• ระยะเวลาการเปลี่ยนแปลง;
• การเปลี่ยนแปลงเวลาฟังก์ชั่น;
• การเปลี่ยนแปลงล่าช้า;
• การเปลี่ยนแปลง;

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

การเปลี่ยนแปลงคุณสมบัติ: ความกว้าง;

ระยะเวลาการเปลี่ยนแปลง- กำหนดระยะเวลาของภาพเคลื่อนไหว โดยสามารถระบุเวลาเป็นวินาทีหรือมิลลิวินาทีได้

ระยะเวลาการเปลี่ยนผ่าน: 1 วินาที;

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

ฟังก์ชันการเปลี่ยนเวลา: ลูกบาศก์เบซิเยร์ (0, 0, 1, 1);

การเปลี่ยนแปลงล่าช้า- ตั้งค่าการหน่วงเวลาก่อนเริ่มภาพเคลื่อนไหว โดยสามารถระบุเป็นวินาทีหรือมิลลิวินาทีได้

ความล่าช้าในการเปลี่ยน: 500ms;

การเปลี่ยนแปลง- นี้ ทรัพย์สินทั่วไปซึ่งช่วยให้คุณแสดงรายการคุณสมบัติสี่รายการแรกตามลำดับ: คุณสมบัติ ระยะเวลา ฟังก์ชันกำหนดเวลา ความล่าช้า

การเปลี่ยนผ่าน: สีพื้นหลัง 1 วินาทีลูกบาศก์เบซิเยร์ (0, 0, 1, 1) 500ms;

นี่คือสิ่งที่เราได้ แอนิเมชั่นง่ายๆ: เมื่อคุณเลื่อนเมาส์ไปเหนือสี่เหลี่ยมจัตุรัส ความกว้างจะเปลี่ยนไป ระยะเวลาของแอนิเมชั่นคือหนึ่งวินาที แอนิเมชั่นเล่นอยู่ ฟังก์ชันเชิงเส้น- ดีเลย์ก่อนที่แอนิเมชั่นจะเริ่ม 500 มิลลิวินาที

กับ ใช้ CSSการเปลี่ยนภาพสามารถทำให้คุณสมบัติเกือบทั้งหมดเคลื่อนไหวได้ และสร้างแอนิเมชั่นที่น่าสนใจ สวยงาม มีประโยชน์ใช้สอย และแม้แต่แอนิเมชั่นที่ซับซ้อนมากมายที่จะเสริมและปรับปรุงโปรเจ็กต์ของคุณ ตัวอย่างเช่น ฉันเปิด Material-FAB ​​นี้ไว้ CSS บริสุทธิ์ใช้การเปลี่ยนภาพ:

ภาพเคลื่อนไหว CSS

ภาพเคลื่อนไหว CSS ช่วยให้คุณสร้างภาพเคลื่อนไหวที่ซับซ้อนมากกว่าการเปลี่ยนผ่าน CSS ความลับทั้งหมดอยู่ใน @keyframes กฎ @keyframes ช่วยให้คุณสร้างภาพเคลื่อนไหวโดยใช้ชุดคีย์เฟรม กล่าวคือ กฎจะอธิบายสถานะของออบเจ็กต์ใน ช่วงเวลาหนึ่งเวลา. ลองดูตัวอย่างง่ายๆ

วงกลมของเรามีชีวิตขึ้นมาและดูเหมือนว่าจะเร้าใจ

มีคุณสมบัติ 9 ประการที่ให้คุณควบคุมภาพเคลื่อนไหว CSS:

• ชื่อแอนิเมชัน;
• ภาพเคลื่อนไหว-ระยะเวลา;
• ฟังก์ชั่นการจับเวลาภาพเคลื่อนไหว;
• ภาพเคลื่อนไหวล่าช้า;
• ภาพเคลื่อนไหวซ้ำนับ;
• ทิศทางแอนิเมชั่น;
• แอนิเมชั่นเล่นสถานะ;
• แอนิเมชั่นเติมโหมด;
• แอนิเมชั่น;

ชื่อแอนิเมชั่น- นี่คือชื่อของภาพเคลื่อนไหวที่เชื่อมโยงกฎ @keyframes กับตัวเลือก

ชื่อแอนิเมชั่น: my-animation; @keyframes ภาพเคลื่อนไหวของฉัน ( 0% ( ความทึบ: 0; ) 100% ( ความทึบ: 1; ) )

ภาพเคลื่อนไหวซ้ำนับ- กำหนดจำนวนการทำซ้ำของแอนิเมชั่น ค่าเริ่มต้นคือ 1 ค่าอนันต์หมายความว่าแอนิเมชั่นจะเล่นอย่างไม่มีที่สิ้นสุด

ภาพเคลื่อนไหวนับซ้ำ: 2;

ทิศทางภาพเคลื่อนไหว- กำหนดทิศทางของภาพเคลื่อนไหว

ทิศทางแอนิเมชั่น: ย้อนกลับ;

สถานะการเล่นภาพเคลื่อนไหว - คุณสมบัตินี้ควบคุมการหยุดและการเล่นภาพเคลื่อนไหว มีสองค่าคือ กำลังรัน (ภาพเคลื่อนไหวจะเล่นตามค่าเริ่มต้น) และหยุดชั่วคราว (หยุดภาพเคลื่อนไหว)

สถานะการเล่นภาพเคลื่อนไหว: หยุดชั่วคราว;

แอนิเมชั่นเติมโหมด- กำหนดคุณสมบัติ CSS ที่จะนำไปใช้กับวัตถุก่อนหรือหลังภาพเคลื่อนไหว สามารถรับค่าต่อไปนี้:

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

แอนิเมชั่นเติมโหมด: ย้อนกลับ;

คุณสมบัติ ภาพเคลื่อนไหว-ระยะเวลา, ฟังก์ชั่นการจับเวลาภาพเคลื่อนไหว, ภาพเคลื่อนไหวล่าช้าพวกมันทำงานในลักษณะเดียวกับคุณสมบัติที่คล้ายกันในการเปลี่ยน CSS ซึ่งฉันเขียนไว้ก่อนหน้านี้ ดังนั้นฉันจะไม่ทำซ้ำ

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

โมดูลเส้นทางการเคลื่อนไหว

Motion Path Module CSS ช่วยให้คุณสร้างการเคลื่อนไหวของวัตถุตามเส้นทางผ่านคุณสมบัติเส้นทางการเคลื่อนไหวพิเศษ ก่อนหน้านี้แอนิเมชั่นดังกล่าวสามารถทำได้ด้วยเท่านั้น โดยใช้ SVGหรือสคริปต์ที่ซับซ้อน

ข้อกำหนดนี้มี 3 คุณสมบัติ:

• เส้นทางการเคลื่อนไหว;
• การเคลื่อนไหวชดเชย;
• การเคลื่อนไหวการหมุน;

เส้นทางการเคลื่อนไหว- คุณสมบัตินี้ช่วยให้คุณระบุจุด (พิกัด) ที่วัตถุจะเคลื่อนที่ ไวยากรณ์เหมือนกับแอตทริบิวต์เส้นทาง SVG

เส้นทางการเคลื่อนไหว: เส้นทาง ("M 235.323 Q 412.440 365.615 Q 400.300 670.240 L 870.340 L 975.535 Q 730.600 630.535 z");

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

@keyframes เครื่องบินบิน ( 0% ( ชดเชยการเคลื่อนไหว: 0; ) 100% ( ชดเชยการเคลื่อนไหว: 100%; ) )

การเคลื่อนไหวการหมุน- คุณสมบัตินี้ช่วยให้คุณระบุได้ว่าวัตถุจะเคลื่อนที่ไปข้างหน้าด้านใด คุณสามารถระบุอัตโนมัติ ย้อนกลับ หรือค่าของคุณเองเป็นองศาได้ ("-45deg", "30deg" ฯลฯ)

การเคลื่อนไหว-การหมุน: อัตโนมัติ;

น่าเสียดายที่ปัจจุบัน Motion-path รองรับเฉพาะใน Chrome และ Opera เท่านั้น แต่หวังว่าเบราว์เซอร์อื่นๆ จะเป็นไปตามตัวอย่างของพวกเขาในเร็วๆ นี้ เพราะสิ่งนี้มีประโยชน์จริงๆ

สำหรับผู้ที่ยังไม่เข้าใจวิธีการทำงานหรือต้องการทำความเข้าใจให้ดีขึ้น ฉันได้จัดทำตัวอย่าง (ลิงก์ไปยัง codeopen)

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

1. ภาพเคลื่อนไหว Magic CS33

Magic CSS3 Animations เป็นแพ็คเกจภาพเคลื่อนไหว CSS3 พร้อมเอฟเฟกต์พิเศษที่คุณสามารถใช้งานได้กับโปรเจ็กต์เว็บต่างๆ ได้อย่างอิสระ เพียงแค่เปิดเครื่อง สไตล์ CSS magic.css หรือ magic.min.css เวอร์ชันย่อ

2. แผ่นโกงแอนิเมชัน CSS3

CSS3 Animation Cheat Sheet คือชุดแอนิเมชั่นแบบ Plug-and-Play ที่ติดตั้งไว้ล่วงหน้าสำหรับโปรเจ็กต์เว็บ หากต้องการใช้งานคุณจะต้องเพิ่มสไตล์ให้กับไซต์และปรับใช้สไตล์ที่เตรียมไว้ คลาสซีเอสเอสไปยังองค์ประกอบที่คุณต้องการทำให้เคลื่อนไหว แผ่นโกงภาพเคลื่อนไหว CSS3 ใช้กฎ @keyframes และใช้งานได้ทั้งหมด เวอร์ชันล่าสุดเบราว์เซอร์ (รวมถึง IE 10)

3. คีย์เฟรม CSS3

เครื่องมือสร้างแอนิเมชั่น CSS3 Keyframesเป็นเครื่องมือออนไลน์ที่ช่วยให้คุณสามารถสร้างภาพเคลื่อนไหวโดยใช้กฎ @keyframes

4. เวทมนตร์

รวมเอฟเฟกต์ CSS มากมาย เอฟเฟกต์แบ่งออกเป็นหลายประเภท ( เวทมนตร์ มุมมอง การหมุน การกะพริบ ภาพนิ่ง ภาพเคลื่อนไหวแบบโฮเวอร์ CSS3) และทั้งหมดก็สวยงามมาก แต่ละคนมีชั้นเรียนของตัวเอง วิธีที่ง่ายที่สุดในการใช้งานคือการเพิ่มคลาสเหล่านี้ให้กับองค์ประกอบเป้าหมายผ่าน JavaScript

5. Animate.css

Animate.css มีชุดเอฟเฟกต์ภาพเคลื่อนไหว CSS3 ข้ามเบราว์เซอร์ สามารถใช้เอฟเฟ็กต์เพื่อดึงดูดความสนใจ สร้างภาพเคลื่อนไหวตามลักษณะที่ปรากฏและการหายไปขององค์ประกอบ

6. ตีกลับ เจส

นี้ ไลบรารีจาวาสคริปต์เพื่อสร้างภาพเคลื่อนไหวแบบไดนามิก เพียงเพิ่มส่วนประกอบและเลือกค่าที่ตั้งล่วงหน้า หลังจากนี้ คุณจะได้รับ URL แบบสั้นหรือส่งออกภาพเคลื่อนไหว CSS3 จากตัวอย่าง

7. โฮเวอร์. CSS

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

8. Ani.js

AniJS เป็นไลบรารีแอนิเมชั่น CSS ที่ช่วยให้การพัฒนาของคุณเร็วขึ้นและสมบูรณ์ยิ่งขึ้น มีเอกสารครบถ้วนและใช้งานง่าย

9. ความคืบหน้า js

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

10. คีย์เฟรม

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

11. สไตล์

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

12.CSSketch

CSSketch เป็นปลั๊กอิน Sketch 3 ที่ช่วยให้คุณเปลี่ยนการออกแบบของคุณได้อย่างรวดเร็วโดยการแทรกสไตล์ชีต รองรับภาษาสไตล์ ( น้อย- ซึ่งจะทำให้คุณสามารถใช้ฟังก์ชันและตัวแปรในสไตล์ชีตของคุณได้ CSSketch คือ ซอฟต์แวร์โดยเปิดเต็มที่ รหัสแหล่งที่มาเพื่อให้คุณสามารถมีส่วนร่วมในการพัฒนาได้

13. ไฟแช็คเตอร์

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

14. deCSS3

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

15.GFX

GFX เป็นไลบรารีแอนิเมชั่น 3D CSS3 ที่ขยาย JQuery ด้วยหลาย ๆ คุณสมบัติที่มีประโยชน์สำหรับ การสร้างซอฟต์แวร์การเปลี่ยน CSS3 ซึ่งควบคุมโดยใช้เมธอด setTimeout

คำแปลบทความ " 15 แอนิเมชั่น CSS3 ที่ดีที่สุด เครื่องมือสำหรับนักพัฒนา» จัดทำโดยทีมงานโครงการที่เป็นมิตร