ตัวอย่างแอนิเมชั่น CSS3 อย่างง่าย 9 ตัวอย่าง ตัวอย่างภาพเคลื่อนไหว CSS3 อย่างง่ายเก้าตัวอย่าง คู่มือฉบับสมบูรณ์สำหรับ Flexbox

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

วันนี้เราจะแสดงวิธีทำงานกับไลบรารี่ CSS3 ที่จะเปลี่ยนการสร้างแอนิเมชั่นให้เป็นกระบวนการที่ง่ายและสะดวก: Animate.css

Animate.css เป็นไลบรารีสำหรับสร้างภาพเคลื่อนไหวโดยใช้ CSS3 ไลบรารีนี้รองรับเอฟเฟกต์ภาพเคลื่อนไหวมากกว่า 50 แบบ ซึ่งเกือบทั้งหมดใช้งานได้ เบราว์เซอร์ที่แตกต่างกัน, รองรับโดย CSS3

เอฟเฟ็กต์เหล่านี้สามารถนำไปใช้กับข้อความ รูปภาพ รูปร่าง และอื่นๆ ได้

เริ่มกันเลย

หากต้องการเปิดใช้งาน Animate.css ให้เชื่อมต่อ ชั้นเรียนที่จำเป็นไปยังองค์ประกอบของหน้า ในการเริ่มต้น ให้รวมไฟล์ animate.css ไว้ในส่วนหัว คุณสามารถดาวน์โหลดไลบรารีได้จากพื้นที่เก็บข้อมูลบน Github

ตามค่าเริ่มต้น Animate.css จะเล่นภาพเคลื่อนไหวหนึ่งครั้งเมื่อโหลดหน้าเว็บ หากต้องการเล่นภาพเคลื่อนไหวแบบวนซ้ำ ให้เพิ่ม Javascript เล็กน้อย

... ...

HTML

ขั้นแรก เราต้องกำหนดคลาส .animated ให้กับองค์ประกอบที่ต้องการ ตามด้วยคลาสประเภทภาพเคลื่อนไหว

ข้อความนี้จะเคลื่อนไหว

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

การตั้งค่า CSS เพิ่มเติม

หากเราต้องการให้ภาพเคลื่อนไหวไม่หยุดหรือเวลาในการดำเนินการแตกต่างออกไป เราจำเป็นต้องปรับค่าบางอย่าง

หากต้องการเลื่อนภาพเคลื่อนไหวเป็นครั้งที่ n หรือจำนวนครั้งไม่สิ้นสุด เราสามารถปรับแอททริบิวต์ Animation-iteration-count ได้ อย่าลืมระบุคำนำหน้าเบราว์เซอร์สำหรับ webkit, moz ฯลฯ สำหรับการเลื่อนแบบไม่มีที่สิ้นสุด ให้ตั้งค่าเป็น infinite

หากเราจำเป็นต้องเล่นแอนิเมชั่นตามจำนวนที่กำหนด ก็สามารถทำตามนี้ได้

ผู้ขาย-ภาพเคลื่อนไหว-การวนซ้ำ-นับ: อนันต์ | -

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

ตัวเลือก ( -webkit-animation-duration: 3s; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: 5; )

จาวาสคริปต์

ในการสร้างภาพเคลื่อนไหวระหว่างเหตุการณ์บางอย่าง (เช่น เมื่อคลิก) เราจะใช้ Javascript ก่อนอื่นเรามาเพิ่มลิงค์กันก่อน

ข้อความนี้จะเคลื่อนไหว คลิกเพื่อสร้างภาพเคลื่อนไหว!

เมื่อใช้ Javascript เราสามารถสร้างฟังก์ชันภาพเคลื่อนไหว ซึ่งเราจะส่งชื่อของคลาสแอนิเมชัน:

$(function() ( $("#ref").click(function() ( animate(".demo", "bounce"); return false; )); ));

ฟังก์ชั่น animate(element_ID, ภาพเคลื่อนไหว) ( $(element_ID).addClass(animation); var wait = window.setTimeout(function())( $(element_ID).removeClass(animation)), 1300);

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

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

Animate.CSS เป็นสคริปต์ที่รับผิดชอบโดยตรงต่อแอนิเมชันนั้นเอง อันที่จริงแล้ว wow.js ใช้แอนิเมชั่นจากสิ่งนี้ และมีหลายโหล

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

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

- ท้ายที่สุด ตอนนี้เราไม่ต้องเขียนและเจาะลึกโค้ด js แล้ว เสียบปลั๊กแล้วลืมมันไปได้เลย

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

- ตอนนี้วิ่งไปดูวิดีโอ

บทเรียน: WOW.js และ Animate.CSS - สนุกยิ่งขึ้นไปด้วยกัน!

ไปเลย!

การตั้งค่า WOW.js วิธีดาวน์โหลดและเชื่อมต่อ

ขั้นตอนที่ 2

เราเชื่อมต่อสคริปต์กับโค้ด HTML ง่ายๆ บนหน้าเว็บในแท็ก:

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

ในการเชื่อมต่อสคริปต์เข้ากับไซต์

ขั้นตอนที่ 3 คุณต้องเริ่มต้นสคริปต์โดยเพิ่มโค้ดต่อไปนี้ทันทีหลังจากเชื่อมต่อ:

ใหม่ว้าว().init();

เมื่อถึงจุดนี้ การเชื่อมต่อจะสิ้นสุดลง และถึงเวลาสำหรับขั้นที่สอง

การใช้งาน WOW.js

ขั้นตอนที่ 1 เลือกองค์ประกอบที่เราต้องการทำให้เคลื่อนไหวและเพิ่ม class="wow" ลงไป ในโค้ดด้านล่าง ฉันแสดงสิ่งนี้โดยใช้รูปภาพตัวอย่าง:

ขั้นตอนที่ 2 เลือกภาพเคลื่อนไหวและเพิ่มคลาสเพิ่มเติมให้กับสุนัขของเรา:

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

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

การตั้งค่าภาพเคลื่อนไหว WOW.js ผ่านแอตทริบิวต์ data-wow-duration – ระบุเวลาเล่นภาพเคลื่อนไหว data-wow-delay – ตั้งค่าการหน่วงเวลาก่อนที่จะเล่นข้อมูลภาพเคลื่อนไหว wow-offset – เปิดใช้งานภาพเคลื่อนไหวเมื่อองค์ประกอบผ่านจำนวนพิกเซลที่กำหนดจาก ด้านล่างของหน้าจอ data-wow- iteration – จำนวนการทำซ้ำแอนิเมชั่น

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

| 18.02.2016

เอาล่ะเพื่อนๆ นั่นอาจเป็นทั้งหมด หากคุณมีคำถามใด ๆ ถามในความคิดเห็น;)

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

สำหรับข้อมูลโดยละเอียดเพิ่มเติม คุณสามารถดาวน์โหลดไฟล์เก็บถาวรพร้อมไฟล์ได้

เอฟเฟกต์ทั้งหมดทำงานโดยใช้คุณสมบัติการเปลี่ยนแปลง การเปลี่ยนแปลง- “transition”, “transformation”) และ pseudo-class:hover ซึ่งกำหนดสไตล์ขององค์ประกอบเมื่อเคอร์เซอร์ของเมาส์เลื่อนไปเหนือองค์ประกอบนั้น (ในบทช่วยสอนของเรา) สำหรับตัวอย่างของเรา เราใช้ div ขนาด 500x309 พิกเซล สีพื้นหลังเริ่มต้น #6d6d6d และระยะเวลาการเปลี่ยนภาพ 0.3 วินาที

เนื้อความ > div ( ความกว้าง: 500px; ความสูง: 309px; พื้นหลัง: #6d6d6d; -webkit-transition: การผ่อนผันทั้งหมด 0.3 วินาที;; -moz-transition: การผ่อนผันทั้งหมด 0.3 วินาที;; -o-transition: การผ่อนผันทั้งหมด 0.3 วินาที;; การเปลี่ยนแปลง: ความง่ายดายทั้งหมด 0.3 วินาที)

1. เปลี่ยนสีเมื่อโฮเวอร์

กาลครั้งหนึ่ง การใช้เอฟเฟกต์ดังกล่าวเป็นงานที่ต้องใช้ความอุตสาหะค่อนข้างมาก ด้วยการคำนวณทางคณิตศาสตร์ของค่า RGB บางอย่าง ตอนนี้ก็เพียงพอที่จะเขียนลงไป สไตล์ CSSซึ่งคุณจะต้องเพิ่ม pseudo-class:hover ให้กับตัวเลือกและตั้งค่า สีพื้นหลังซึ่งราบรื่น (ใน 0.3 วินาที) จะเปลี่ยนสีพื้นหลังเดิมเมื่อคุณวางเมาส์เหนือบล็อก:

สี:โฮเวอร์ ( พื้นหลัง:#53ea93; )

2. ลักษณะของเฟรม

การเปลี่ยนแปลงที่น่าสนใจและโดดเด่นคือกรอบด้านในที่ปรากฏขึ้นอย่างนุ่มนวลเมื่อคุณเลื่อนเมาส์ เหมาะสำหรับตกแต่งกระดุมต่างๆ เพื่อให้บรรลุผลนี้ เราใช้ pseudo-class:hover และคุณสมบัติ box-shadow พร้อมด้วยพารามิเตอร์ inset (ตั้งค่าเงาภายในองค์ประกอบ) นอกจากนี้ คุณจะต้องตั้งค่าการยืดเงา (ในกรณีของเราคือ 23px) และสี:

เส้นขอบ: โฮเวอร์ ( กล่องเงา: สิ่งที่ใส่เข้าไป 0 0 0 23px #53ea93; )

3. สวิง

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

@keyframes เป็นคำสั่งพื้นฐานสำหรับการสร้างภาพเคลื่อนไหว CSS แบบเฟรมต่อเฟรม ซึ่งช่วยให้คุณทำสิ่งที่เรียกว่าได้ กระดานเรื่องราวและอธิบายแอนิเมชั่นเป็นรายการประเด็นสำคัญ
ภาพเคลื่อนไหวและจำนวนการวนซ้ำของภาพเคลื่อนไหว - คุณสมบัติสำหรับการตั้งค่าพารามิเตอร์ภาพเคลื่อนไหว (ระยะเวลาและความเร็ว) และจำนวนรอบ (การทำซ้ำ) ในกรณีของเรา ให้ทำซ้ำ 1

@-webkit-keyframes แกว่ง ( 15% ( -webkit-transform: TranslateX(9px); แปลง: TranslateX(9px); ) 30% ( -webkit-transform: TranslateX(-9px); แปลงร่าง: TranslateX(-9px); ) 40% ( -webkit-transform: TranslateX(6px); การแปลง: TranslateX(6px); ) 50% ( -webkit-transform: TranslateX(-6px); การแปลง: TranslateX(-6px); ) 65% ( -webkit -transform: TranslateX(3px); การแปลง: แปลX(3px) 100% ( -webkit-transform: แปลX(0); การแปลง: แปลX(0); ) ) @keyframes แกว่ง ( 15% ( -webkit-transform: แปลX( 9px); แปลงร่าง: แปลX(9px); ) 30% ( -webkit-transform: แปลX(-9px); แปลง: แปลX(-9px); ) 40% ( -webkit-transform: แปลX(6px); แปลงร่าง: แปลX (6px); ) 50% ( -webkit-transform: TranslateX(-6px); การแปลง: แปลX(-6px); ) 65% ( -webkit-transform: แปลX(3px); การแปลง: แปลX(3px); ) 100 % ( -webkit-transform: TranslateX(0); แปลง: TranslateX(0); ) ) .swing:hover ( -webkit-animation: swing 0.6s ง่าย;

ภาพเคลื่อนไหว: แกว่ง 0.6s ง่าย;

-webkit-animation-iteration-count: 1;

ภาพเคลื่อนไหวซ้ำนับ: 1; ) 4. การลดทอน

เอฟเฟกต์การเฟดคือการเปลี่ยนแปลงความโปร่งใสขององค์ประกอบอย่างง่ายๆ แอนิเมชั่นถูกสร้างขึ้นในสองขั้นตอน: ขั้นแรกคุณต้องตั้งค่าสถานะความโปร่งใสเริ่มต้นเป็น 1 - นั่นคือความทึบสมบูรณ์ จากนั้นระบุค่าเมื่อวางเมาส์ - 0.6:

จางลง ( ความทึบ: 1; ) .เฟด:โฮเวอร์ ( ความทึบ: 0.6; )

สำหรับผลลัพธ์ที่ตรงกันข้าม ให้สลับค่า:

5. การขยายภาพ

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

เติบโต: โฮเวอร์ ( -webkit-transform: ขนาด (1.2); -ms-transform: ขนาด (1.2); แปลง: ขนาด (1.2); )

6. การลดลง

แอนิเมชั่นที่ใช้กันทั่วไปอย่างหนึ่งคือองค์ประกอบสี่เหลี่ยมที่จะแปลงเป็นวงกลมเมื่อวางเมาส์เหนือ การใช้คุณสมบัติ border-radius ของ CSS ใช้ร่วมกับ :hover และ transition สามารถทำได้โดยไม่มีปัญหา:

วงกลม:โฮเวอร์ ( รัศมีเส้นขอบ: 70%; )

8. การหมุน

ตัวเลือกแอนิเมชั่นสนุกๆ คือการหมุนองค์ประกอบตามจำนวนองศาที่กำหนด ในการทำเช่นนี้ เราจะต้องมีคุณสมบัติการแปลงอีกครั้ง แต่มีค่าที่แตกต่างกัน - RottoZ(20deg) ด้วยพารามิเตอร์เหล่านี้ บล็อกจะหมุนตามเข็มนาฬิกา 20 องศาสัมพันธ์กับแกน Z:

หมุน: โฮเวอร์ ( -webkit-transform: หมุนZ(20deg); -ms-transform: หมุนZ(20deg); การแปลง: หมุนZ(20deg); )

9. เงา 3 มิติ

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

Threed:โฮเวอร์ ( กล่องเงา: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: TranslateX( -7px); แปลง: แปลX(-7px )

รองรับเบราว์เซอร์

เบราว์เซอร์ต่อไปนี้รองรับคุณสมบัติการเปลี่ยนแปลงในปัจจุบัน:

เบราว์เซอร์เดสก์ท็อป

อินเทอร์เน็ตเอ็กซ์พลอเรอร์	รองรับ IE 10 ขึ้นไป
โครเมียม	รองรับตั้งแต่เวอร์ชัน 26 (จนถึงเวอร์ชัน 25 ใช้งานได้กับคำนำหน้า -webkit-)
ไฟร์ฟอกซ์	รองรับตั้งแต่เวอร์ชัน 16 (ในเวอร์ชัน 4-15 ใช้งานได้กับคำนำหน้า -moz-)
โอเปร่า	รองรับตั้งแต่เวอร์ชัน 12.1
ซาฟารี	รองรับตั้งแต่เวอร์ชัน 6.1 (ในเวอร์ชัน 3.1-6 ใช้งานได้กับคำนำหน้า -webkit-)

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

เราหวังว่าคุณจะพบว่าตัวอย่างภาพเคลื่อนไหว CSS3 เหล่านี้มีประโยชน์ เราหวังว่าคุณจะประสบความสำเร็จอย่างสร้างสรรค์!

ผู้เยี่ยมชมจำนวนมากมีคำถามเกี่ยวกับวิธีใช้ไลบรารี Animate.css ในทางปฏิบัติ ในความเป็นจริงทุกอย่างเกิดขึ้นค่อนข้างง่ายคุณเพียงแค่ต้องผ่านขั้นตอนทั้งหมดเพียงครั้งเดียวจากนั้นทำซ้ำการกระทำบางอย่างโดยการเปรียบเทียบ

1. ก่อนอื่นคุณต้องดาวน์โหลดและเชื่อมต่อไลบรารี มีสามตัวเลือก

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

2. หากต้องการใช้เอฟเฟกต์ภาพเคลื่อนไหวกับองค์ประกอบที่ต้องการ ให้เพิ่มคลาสสองคลาสลงไป - ภาพเคลื่อนไหวและคลาสที่มีชื่อของเอฟเฟกต์ เช่น fadeInDown (ดูรายการเอฟเฟกต์ทั้งหมดและชื่อของมัน) ตัวอย่างเช่น สมมติว่าคุณต้องการเพิ่มการสั่นไหวให้กับรูปภาพทั้งหมดบนเพจ ใน HTML เราเขียนดังต่อไปนี้:

หากไซต์ใช้ jQuery การเพิ่มคลาสจะง่ายขึ้นและดำเนินการผ่าน JavaScript

$(document).ready(function() ( $("img").addClass("ภาพเคลื่อนไหวแฟลช"); ))

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

ตัวอย่างที่ 1: ข้อความป๊อปอัป

Warning .warning ( พื้นหลัง: #fc0; padding: 10px; border: 1px solid #000; ) จำนวนชั่วโมงสุดยอดจะประมาณค่าเส้นศูนย์สูตร!

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

ตัวอย่างที่ 2 คลังภาพ

แกลเลอรี $(document).ready(function() ( $("img.animated").hover(function() ( $(this).addClass("bounce"); // เพิ่มคลาสการตีกลับ), function() ($(this).removeClass("bounce"); // ลบคลาส ))))

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

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

ภาพเคลื่อนไหว ( -webkit-animation-duration: .6s; -o-animation-duration: .6s; -moz-animation-duration: .6s; Animation-duration: .6s; -webkit-animation-delay: 1s; -o -ภาพเคลื่อนไหวล่าช้า: 1s; -moz-ภาพเคลื่อนไหวล่าช้า: 1s;

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

ฉันดึงความสนใจของคุณไปที่ข้อเท็จจริงที่ว่าในการศึกษาเนื้อหานี้คุณจะต้องมีความรู้ที่คุณต้องได้รับในบทความก่อนหน้า ""

สถานะภาพเคลื่อนไหว

คุณสมบัติง่ายๆ ถัดไปที่เราจะดูคือ Animation-play-state ซึ่งจะกำหนดสถานะของภาพเคลื่อนไหว คุณสมบัตินี้ผ่านหนึ่งในสองคำหลักที่เป็นไปได้:

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

หยุดชั่วคราวและเริ่มภาพเคลื่อนไหว .test ( width : 100px ; /* ความกว้างขององค์ประกอบ */ ความสูง : 100px ; /* ความสูงขององค์ประกอบ */ color : white ; /* สีตัวอักษรสีขาว */ พื้นหลัง : สีเขียว ; /* สีพื้นหลัง */ ตำแหน่ง : สัมพันธ์ ; /* องค์ประกอบที่มีตำแหน่งสัมพันธ์กัน */ แอนิเมชั่น-ชื่อ: ทำซ้ำอย่างไม่มีที่สิ้นสุด */ แอนิเมชั่นเล่น- state : running ; /* การเล่นภาพเคลื่อนไหว (ค่าเริ่มต้น) */ .test:hover ( Animation-play-state : Paused ; /* ระบุว่าภาพเคลื่อนไหวหยุดชั่วคราวเมื่อเลื่อนเมาส์ไปเหนือองค์ประกอบ */ ) @keyframes iliketoveit ( 0% ( left : 0px ;) /* เริ่มต้นวงจรภาพเคลื่อนไหว */ 25% ( left : 400px ;) /* 25% ของระยะเวลาภาพเคลื่อนไหว */ 75% ( left : 200px ;) /* 75 % ของระยะเวลาภาพเคลื่อนไหว */ 100 % ( left : 0px ;) /* สิ้นสุดลูปภาพเคลื่อนไหว */ ) ชี้มาที่ฉัน

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

เมื่อวางเคอร์เซอร์เหนือองค์ประกอบด้วยเคอร์เซอร์ของเมาส์ (คลาสหลอก :hover()) ภาพเคลื่อนไหวจะถูกหยุดชั่วคราวโดยการตั้งค่าคุณสมบัติ Animation-play-state เป็น Paused และภาพเคลื่อนไหวจะกลับมาทำงานต่อเมื่อเคอร์เซอร์ออกจากองค์ประกอบ

ผลลัพธ์ของตัวอย่างของเรา:

ทิศทางแอนิเมชั่น

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

ชื่อแอนิเมชั่น- iliketoveit.
ระยะเวลาของภาพเคลื่อนไหว- 4 วินาที
เส้นโค้งความเร็ว- ขั้นตอนแอนิเมชั่นขั้นตอน (3, เริ่มต้น) จะมีการผลิตสำหรับแต่ละส่วนของคีย์เฟรม 3 ขั้นตอน.
ความล่าช้าของภาพเคลื่อนไหว- 500 มิลลิวินาที
จำนวนรอบ- อนันต์ (อนันต์)
ทิศทางแอนิเมชั่น- ย้อนกลับ (ในทิศทางตรงกันข้าม)

ผลลัพธ์ของตัวอย่างของเรา:

ลองพิจารณาตัวอย่างต่อไปนี้ซึ่ง

กำลังโหลดภาพเคลื่อนไหวบนเนื้อหา CSS ( margin : 0 ; /* padding */ padding : 0 ; /* padding */ ) .container ( width : 100px ; /* element width */ padding-top : 100px ; /* padding top */ Margin : 0 auto ; /* จัดกึ่งกลางองค์ประกอบด้วยระยะขอบด้านนอก */ ) div > div ( display : inline-block ; /* ตั้งค่าองค์ประกอบที่ซ้อนกันเป็น block-line (มีเส้นบรรทัด) */ width : 10px ; /* width element */ height : 10px ; /* ความสูงขององค์ประกอบ */ margin : 0 auto ; /* จัดกึ่งกลางองค์ประกอบด้วยระยะขอบภายนอก */ border-radius : 50px ; 1) ( พื้นหลัง : สีส้ม ; /* สีพื้นหลัง */ ภาพเคลื่อนไหว : ขึ้น 1 วินาทีเชิงเส้น 1 วินาทีไม่มีที่สิ้นสุด ; .item:nth-child(2) ( พื้นหลัง : สีม่วง ; /* สีพื้นหลัง */ ภาพเคลื่อนไหว : ขึ้น 1 วินาทีเชิงเส้น 1.2 วินาทีไม่มีที่สิ้นสุด ; /* ชื่อระยะเวลา เวลา-ฟังก์ชัน หน่วงเวลานับการวนซ้ำ */ ) .item:nth-child(3) ( พื้นหลัง: สีม่วงแดง ; /* สีพื้นหลัง */ ภาพเคลื่อนไหว: ขึ้น 1 วินาทีเชิงเส้น 1.4 วินาทีไม่มีที่สิ้นสุด ; /* ชื่อระยะเวลา timing-function หน่วงเวลานับซ้ำ */ ) .item:nth-child(4) ( พื้นหลัง: lightseagreen ; /* สีพื้นหลัง */ ภาพเคลื่อนไหว: ขึ้น 1 วินาทีเชิงเส้น 1.6 วินาทีไม่สิ้นสุด ; /* ระยะเวลาชื่อ ฟังก์ชั่นจับเวลา การนับการวนซ้ำล่าช้า */ ) .item:nth-child(5) ( พื้นหลัง : ป่าไม้ ; /* สีพื้นหลัง */ ภาพเคลื่อนไหว : ขึ้น 1 วินาทีเชิงเส้น 1.8 วินาทีไม่มีที่สิ้นสุด ; /* ระยะเวลาชื่อ ฟังก์ชั่นการจับเวลา การนับการวนซ้ำล่าช้า * / ) @keyframes up ( 0%, 100% ( /* เริ่มต้นและสิ้นสุดของลูปภาพเคลื่อนไหว */ แปลง : TranslateY(-15px) ; /* เลื่อนองค์ประกอบไปตามแกน Y */ ) 50% ( /* ตรงกลางของภาพเคลื่อนไหว */ แปลง : Translate(5px, 0) ; /* เลื่อนองค์ประกอบไป 5px ตามแกน X ไม่มีการเลื่อนไปตามแกน Y */ ) )

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

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

มาดูภาพเคลื่อนไหวง่ายๆ จากไลบรารีที่เปลี่ยนความโปร่งใสขององค์ประกอบ:

@keyframes fadeIn ( จาก ( /* จุดเริ่มต้นของลูปภาพเคลื่อนไหว (เหมือนกับ 0%) */ ความทึบ : 0 ; /* องค์ประกอบโปร่งใสอย่างสมบูรณ์ */ ) ถึง ( /* สิ้นสุดลูปภาพเคลื่อนไหว (เหมือนกับ 100%) * / ความทึบ : 1 ; /* องค์ประกอบทึบแสง */ ) .fadeIn ( ชื่อภาพเคลื่อนไหว : fadeIn ; /* ชื่อภาพเคลื่อนไหว (ตรงกับชื่อในกฎ @keyframes) */ )

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

แต่นี่ยังไม่เพียงพอที่จะเปิดแอนิเมชั่นของไลบรารี Animate.css ที่คุณสนใจ ในการเริ่มแอนิเมชั่น คุณสามารถใช้คลาสต่อไปนี้ที่สร้างโดยผู้สร้างโปรเจ็กต์ได้ แต่ไม่จำเป็น:

/* คลาสพื้นฐานซึ่งช่วยให้ภาพเคลื่อนไหวทำงานได้หนึ่งรอบ */ .animated ( Animation-duration : 1s ; /* ระยะเวลาของภาพเคลื่อนไหว 1 วินาที */ Animation-fill-mode : ทั้งสอง ; /* ตั้งค่าสไตล์สำหรับองค์ประกอบเมื่อภาพเคลื่อนไหวไม่ได้เล่น (เมื่อแอนิเมชั่นเสร็จสิ้นและก่อนที่จะเริ่ม - ระหว่างการดีเลย์) */ ) /* การเพิ่มคลาส .infinite ให้กับองค์ประกอบที่มีคลาส .animated จะทำให้แอนิเมชั่นเล่นได้อย่างไม่มีกำหนด */ .animated.infinite ( Animation-iteration-count : อนันต์ ; / * แอนิเมชั่นจะเล่นอย่างไม่มีที่สิ้นสุด */ )

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

ลองดูตัวอย่าง:

แอนิเมชันโดยใช้ไลบรารี Animate.CSS

ในตัวอย่างนี้ เราเชื่อมต่อไลบรารี Animate.css โดยใช้แท็ก และวางรูปภาพที่เราเชื่อมต่อ (ระบุโดยคั่นด้วยช่องว่าง) ใน 3 คลาสต่อไปนี้จากไลบรารี