Animate.css ได้รับรอบไม่กี่ปีที่ผ่านมาและฉันต้องยอมรับที่จะค่อนข้างช้าไปงานเลี้ยง ฉันเพิ่งค้นพบเมื่อไม่กี่เดือนที่ผ่านมาในขณะที่ค้นหาสุทธิสำหรับบทเรียนการเคลื่อนไหวของ CSS และพบสิ่งที่จะเป็นวิธีที่เร็วและง่ายที่สุดในการสร้างภาพเคลื่อนไหว Animate.css
Animate.css สร้างโดยคนที่ชื่อ Dan Eden เป็นวิธีที่รวดเร็วในการดูว่า CCS ทำงานอย่างไรและรับแอนิเมชั่นแอ็คชั่นบนเว็บไซต์ของคุณ
อธิบายว่าเป็น 'ภาพเคลื่อนไหว CSS เพียงแค่เพิ่มน้ำ' Animate.css เป็นเรื่องสนุกกับด้านที่จริงจัง มันช่วยให้แม้แต่นักออกแบบเว็บไซต์มือสมัครเล่นเช่นตัวผมเองสามารถจับภาพพื้นฐานของภาพเคลื่อนไหว CSS ได้อย่างรวดเร็วและสร้างเอฟเฟกต์ที่เรียบง่าย แต่มีประสิทธิภาพสำหรับเว็บไซต์ ตั้งแต่พาดหัวภาพเคลื่อนไหวเดียวไปจนถึงการเคลื่อนไหวที่เกี่ยวข้องยิ่งขึ้นเครื่องมือนี้สามารถทำได้
Animate.css
Animate.css นั้นสามารถดาวน์โหลดได้จาก GitHub และเป็นไลบรารีของเอฟเฟกต์ CSS อย่างง่ายที่รวบรวมได้จากที่เดียว ภาพเคลื่อนไหวแต่ละภาพได้รับการบรรจุอย่างสวยงามและพร้อมใช้งาน สิ่งที่คุณต้องทำคือค้นหาภาพเคลื่อนไหวที่คุณชอบและใช้คลาส นั่นคือทั้งหมดที่มีให้มัน
คุณไม่จำเป็นต้องดาวน์โหลดไลบรารีทั้งหมดหากคุณไม่ต้องการเนื่องจากมีโค้ด 2, 500 บรรทัดอยู่ภายใน คุณสามารถเยี่ยมชมเว็บไซต์ Animate.css ค้นหาภาพเคลื่อนไหวและคลิกลิงก์ดาวน์โหลด Animate.css มันโหลดคลาสลงบนเว็บเพจเพื่อให้คุณคัดลอกและใช้ตามที่เห็นสมควร
การใช้ GitHub นั้นง่ายกว่าและเจาะลึกเพื่อค้นหาเอฟเฟกต์ที่คุณต้องการ
- นำทางไปยังหน้า css GitHub
- คลิกลิงก์แหล่งที่มาเพื่อเข้าถึงรายการองค์ประกอบ
- เลือกประเภทเอฟเฟกต์ที่คุณต้องการจากรายการ การตีกลับเป็นผู้แสวงหาความสนใจดังนั้นให้เลือกลิงก์ attention_seekers
- เลือก bounce.css
- คัดลอกรหัสและวางลงบนหน้าของคุณเพื่อใช้ภาพเคลื่อนไหว
มันง่ายจริงๆ คุณจะเลือกตัวเลือกที่แตกต่างกันอย่างชัดเจนสำหรับเอฟเฟกต์ต่าง ๆ แต่ผลลัพธ์ที่ได้จะเหมือนกัน การเข้าถึงรหัสที่จำเป็นในการยกของหนักบนหน้า
การสร้างวัตถุเคลื่อนไหวด้วย Animate.css
การสร้างสิ่งดีๆด้วย Animate.css นั้นง่าย เป็นเพียงเรื่องของการค้นหารหัส CCS และเพิ่มลงใน CSS ของคุณเอง ถ้าฉันทำได้ทุกคนทำได้!
ตัวเลือกแรกในหน้า Animate.css คือการตีกลับดังนั้นให้เราใช้ในตัวอย่างนี้
- แปะ ข้างใน ในสไตล์ชีทของคุณ
- ค้นหา CSS สำหรับภาพเคลื่อนไหวที่คุณต้องการและเพิ่มลงในองค์ประกอบที่คุณต้องการทำให้เคลื่อนไหว ตัวอย่างเช่นเพิ่ม ' 'เพื่อเพิ่มเอฟเฟกต์การเด้งนั้นเพื่อทดสอบรูปภาพหรืออะไรก็ตาม
- เพิ่มรหัส CSS ต่อไปนี้เพื่อให้ทำงานได้ทั้งหมด นำมาจาก bounce.css ด้านบน
@keyframes เด้ง {
จาก, 20%, 53%, 80% ถึง {
ภาพเคลื่อนไหวจังหวะเวลาฟังก์ชั่น: ลูกบาศก์เบซิเยร์ (0.215, 0.610, 0.355, 1.000);
แปลง: translate3d (0, 0, 0);
}
40%, 43% {
ภาพเคลื่อนไหวจังหวะเวลาฟังก์ชั่น: ลูกบาศก์เบซิเยร์ (0.755, 0.050, 0.855, 0.060);
แปลง: translate3d (0, -30px, 0);
}
70% {
ภาพเคลื่อนไหวจังหวะเวลาฟังก์ชั่น: ลูกบาศก์เบซิเยร์ (0.755, 0.050, 0.855, 0.060);
แปลง: translate3d (0, -15px, 0);
}
90% {
แปลง: translate3d (0, -4px, 0);
}
}
.bounce {
ชื่อภาพเคลื่อนไหว: เด้ง;
แหล่งกำเนิดการเปลี่ยนแปลง: ศูนย์กลางด้านล่าง;
}
ถ่ายภาพเคลื่อนไหวต่อไปด้วย Animate.css
ลำดับข้างต้นจะเพิ่มเอฟเฟกต์การตีกลับเมื่อหน้าเว็บโหลดครั้งแรกซึ่งดูเท่ห์ แต่เป็นเพียงครั้งเดียว วิธีการเกี่ยวกับเราเพิ่มเพื่อเลื่อน ด้วยวิธีนี้ทุกครั้งที่มีคนวนเวียนอยู่เหนือการทดสอบ ไม่ใช่สิ่งที่ฉันจะทำในเว็บไซต์การผลิต แต่เป็นวิธีที่ดีในการแสดงให้เห็นว่าทุกอย่างทำงานอย่างไร
เพิ่มรหัสต่อไปนี้ใน CSS ของคุณเพื่อเพิ่มการตีกลับในลักษณะโฮเวอร์ ทุกครั้งที่เมาส์เลื่อนไปที่องค์ประกอบมันจะเด้ง
.animated: โฮเวอร์ {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
นิเมชั่น - ระยะเวลา: 1 วินาที;
-webkit-animation-fill-mode: ทั้งสอง;
-moz-animation-fill-mode: ทั้งสอง;
-ms-animation-fill-mode: ทั้งสอง;
-o-animation-fill-mode: ทั้งสอง;
นิเมชั่นเติมโหมด: ทั้งสอง;
}
ถ้าคุณรู้ CSS คุณจะรู้ดีกว่าฉันมากเกี่ยวกับวิธีใช้เอฟเฟกต์ต่าง ๆ กับการกระทำที่แตกต่างกัน ในฐานะผู้เริ่มต้นสิ่งนี้และห้องสมุดที่มีให้ใน Animate.css ช่วยฉันสร้างภาพเคลื่อนไหวพื้นฐาน แต่มีประสิทธิภาพสำหรับหน้าเว็บของฉัน
ฉันไม่รู้ว่าฉันจะใช้งานเว็บไซต์จำนวนเท่าไรเพราะพวกเขาไม่ได้ลงไปด้วยเสมอและผู้ใช้มือถือก็ไม่ชอบพวกเขามากนัก อย่างไรก็ตามในฐานะที่เป็นบทเรียนเกี่ยวกับวิธีการทำงานของ CSS และวิธีการใช้งานเพื่อปรับปรุงเว็บมันเป็นทรัพยากรที่ยอดเยี่ยม ฉันเพิ่งเริ่มต้น แต่ถึงแม้จะใช้เวลาสองสามชั่วโมงกับ Animate.css สำหรับบทช่วยสอนนี้ได้สอนฉันมากมาย ฉันคิดว่าฉันจะเล่นกับมันให้มากขึ้นก่อนที่ฉันจะทำเสร็จ แล้วคุณล่ะ?
