ตัวอย่างภาพเคลื่อนไหว CSS ที่มีประสิทธิภาพสูง

Rachel Andrew

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

ดูทำไมภาพเคลื่อนไหวบางภาพจึงช้าเพื่อเรียนรู้ทฤษฎีเบื้องหลัง คำแนะนำเหล่านี้ และคู่มือภาพเคลื่อนไหวสำหรับเคล็ดลับที่ใช้ได้จริง

ภาพเคลื่อนไหวการโหลดของวิซาร์ด

ดูภาพเคลื่อนไหวการโหลดของวิซาร์ดบน CodePen

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

ตรวจสอบภาพเคลื่อนไหวด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ขณะที่ภาพเคลื่อนไหวกำลังทำงาน ให้เปิดแท็บ "ประสิทธิภาพ" ใน Chrome DevTools และบันทึกภาพเคลื่อนไหว 2-3 วินาที คุณควรจะเห็นในหน้าสรุปว่าเบราว์เซอร์ไม่ได้ดำเนินการ Layout หรือ Paint ใดๆ เมื่อเรียกใช้ภาพเคลื่อนไหวนี้

วันที่

สรุปหลังจากทำโปรไฟล์ภาพเคลื่อนไหวของวิซาร์ดแล้ว

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

วันที่

การดูและเลือกรายการในแผงภาพเคลื่อนไหวของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

เช่น เลือกรูปสามเหลี่ยม และชมว่ากล่องของธาตุแปลงรูปอย่างไรระหว่างการเดินทางขึ้นไปในอากาศ ขณะที่หมุน แล้วกลับไปที่ตำแหน่งเริ่มต้น

วิดีโอแสดงวิธีที่เราสามารถติดตามเส้นทางของรูปสามเหลี่ยมในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

วิธีการทำงาน

รูปสามเหลี่ยมดังกล่าวสร้างขึ้นโดยใช้องค์ประกอบเทียมของ ::after เพื่อเพิ่มเนื้อหาที่สร้างขึ้น โดยใช้เส้นขอบเพื่อสร้างรูปร่าง

.triangle {
    position: absolute;
    bottom: -62px;
    left: -10px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

.triangle::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 28px 48px 28px;
    border-color: transparent transparent #89beb3 transparent;
}

หมายเหตุ: ดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างรูปร่างที่มีเส้นขอบและเนื้อหาที่สร้างขึ้นได้ในรูปร่างของ CSS

ภาพเคลื่อนไหวจะถูกเพิ่มด้วยบรรทัด CSS ต่อไปนี้

animation: path_triangle 10s ease-in-out infinite;

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

@keyframes path_triangle {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-172px) translatex(10px) rotate(-10deg);
  }
  55% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  58% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}

การเคลื่อนไหวแต่ละส่วนของภาพเคลื่อนไหวนี้ใช้เทคนิคที่คล้ายกัน ผลที่ได้คือภาพเคลื่อนไหวที่ซับซ้อน ซึ่งจะเล่นได้อย่างราบรื่น

วงกลมกะพริบ

ดูวงกลมเคลื่อนไหวบน CodePen

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

ตรวจสอบภาพเคลื่อนไหวด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Firefox

ขณะที่ภาพเคลื่อนไหวกำลังทำงาน ให้เปิดแท็บ "ประสิทธิภาพ" ใน Firefox DevTools และบันทึกภาพเคลื่อนไหว 2-3 วินาที หยุดบันทึก ใน Waterfall คุณควรเห็นว่าไม่มีรายการสำหรับคำนวณรูปแบบใหม่ ตอนนี้คุณจะทราบว่าภาพเคลื่อนไหวนี้จะไม่ทำให้เกิดการคำนวณรูปแบบใหม่ และรวมถึงการลงสีและเลย์เอาต์ด้วย

วันที่

Waterfall ของ Firefox DevTools

การอยู่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Firefox จะตรวจสอบวงกลมดังกล่าวเพื่อดูวิธีการทำงานของภาพเคลื่อนไหวนี้ <div> ที่มีคลาส pulsating-circle จะระบุตำแหน่งของวงกลม แต่ไม่ได้วาดเป็นวงกลม

.pulsating-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 30px;
    height: 30px;
}

วงกลมและภาพเคลื่อนไหวที่มองเห็นได้จะแสดงโดยใช้องค์ประกอบเทียม ::before และ ::after

องค์ประกอบ ::before จะสร้างวงแหวนทึบแสงซึ่งขยายออกนอกวงกลมสีขาว โดยใช้ภาพเคลื่อนไหวชื่อ pulse-ring ซึ่งเคลื่อนไหว transform: scale และ opacity

.pulsating-circle::before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #01a4e9;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

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

เมื่อเลือก ::before pseudo-element แล้ว เราจะเห็นคุณสมบัติที่กำลังเคลื่อนไหว

ระบบจะสร้างวงกลมสีขาวและทำให้เคลื่อนไหวโดยใช้องค์ประกอบเทียม ::after ภาพเคลื่อนไหว pulse-dot ใช้ transform: scale เพื่อเพิ่มและย่อจุดระหว่างการแสดงภาพเคลื่อนไหว

.pulsating-circle::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

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

ลูกโลก 3 มิติ CSS ที่แท้จริง

ดู Pure CSS 3D Sphere บน CodePen

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

เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และเลือกองค์ประกอบใดองค์ประกอบหนึ่งที่มีคลาสเป็น plane ทรงกลมประกอบด้วยชุดระนาบและวงล้อหมุน

เครื่องบินกำลังหมุน

หมายเหตุ: เครื่องมือค้นหา DOM ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้ค้นหาองค์ประกอบที่ต้องการตรวจสอบได้ง่ายขึ้น

เครื่องบินและซี่เหล่านี้อยู่ใน Wrapper <div> ซึ่งเป็นองค์ประกอบที่หมุนโดยใช้ transform: rotate3d

.sphere-wrapper {
  transform-style: preserve-3d;
  width: 300px;
  height: 300px;
  position: relative;
  animation: rotate3d 10s linear infinite;
}

@keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

จุดจะฝังอยู่ในองค์ประกอบ plane และ spoke จะใช้ภาพเคลื่อนไหวที่ใช้การแปลงเพื่อปรับขนาดและแปลค่า ซึ่งจะสร้างเอฟเฟกต์กะพริบ

จุดจะหมุนตามทรงกลมและกะพริบ

.spoke-15 .dot,
.spoke-21 .dot {
  animation: pulsate 0.5s infinite 0.83333333s alternate both;
  background-color: #55ffee;
}

@-webkit-keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}

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

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

บทสรุป

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