CSS คีย์เฟรม

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

กฎ @keyframes CSS เป็นเครื่องมือที่เราต้องการเพื่อสร้างแอนิเมชั่นเหล่านี้

@keyframes ไวยากรณ์

@keyframes เป็น CSS at-rule At-rules บอกว่า CSS ควรทำงานอย่างไร มีกฎเกณฑ์อื่นๆ อีกมากมาย เช่น @viewport, @supports เป็นต้น

เรากำหนดกฎ @keyframes ด้วยรูปแบบดังต่อไปนี้

@keyframes <name> {
    from {
    /* start details here */
    }

    to {
    /* end details here */
    }
}

เรารับการประกาศภาพเคลื่อนไหวที่ละเอียดยิ่งขึ้นได้โดยการระบุเปอร์เซ็นต์แทนคีย์เวิร์ด

@keyframes <name> {
  0% { }
  50% { }
  100% { }
}

หมายเหตุ :เพื่อที่จะใช้คีย์เฟรมที่สร้างขึ้นใหม่ของเรา เราต้องเพิ่มมันเป็นค่าของ animation-name คุณสมบัติ. นอกจากนี้เรายังสามารถตั้งค่า animation-duration เพื่อระบุระยะเวลาของแอนิเมชั่น @keyframes ที่เราประกาศ

ตัวอย่างลูกบอลวิเศษ

มาทำให้ลูกบอลวิเศษปรากฏขึ้นและหายไปกันเถอะ โปรดอ้างอิง Codepen ที่แนบมาด้วยหากคุณหลงทางเมื่อใดก็ตาม

สิ่งแรกที่เราต้องทำคือกำหนดแอนิเมชั่นของเรา เราจะตั้งชื่อมันว่าลูกบอลวิเศษ:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

@keyframes magic-ball {
  from {
    background-color: limegreen;
  }
  to {
    background-color: blueviolet;
  }
}

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

.circle {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  animation-name: magic-ball;
  animation-duration: 4s;
}

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

ด้วยแอนิเมชั่นนี้ ลูกบอลของเรากำลังปรากฏขึ้นและหายไป!💥

ตัวอย่างการขายแฟลช

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

@keyframes moveIn {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

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

.square {
  width: 10rem;
  height: 10rem;
  background-color: greenyellow;
  animation-name: moveIn;
  animation-duration: 4s;
}

คุณจะเห็นได้ว่าเราทำผลงานได้ดีเพียงใด!

บทสรุป

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

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