ຫົວວິທີ CSS steps()

ການອະທິບາຍ ແລະ ການນໍາໃຊ້

ກົດລະບຽບ CSS steps() ຫົວວິທີນີ້ຈະສ້າງການການກະຈາຍຄືນຕອນການສະແດງ.

ຫົວວິທີນີ້ຈະແບ່ງເວລາການສະແດງຂອງການສະແດງຕາມຈຸດສະຖານະຂະບວນທີ່ກໍານົດ. ເປັນຕົວຢ່າງ: ຖ້າ n ແມ່ນ 4, ການສະແດງຈະຖືກແບ່ງເວລາໃນ 4 ສ່ວນ; ຄື 0%-25%, 25%-50%, 50%-75%, ແລະ 75%-100%.

ຕົວຢ່າງ

ການສ້າງການການປະກາດການການກະຈາຍຄືນຕອນການສະແດງທີ່ຕ່າງກັນ:

div.a {
  animation: mymove 5s steps(4, end);
}
div.b {
  animation: mymove 5s steps(6, jump-start);
}
div.c {
  animation: mymove 5s steps(4, jump-none);
}
div.d {
  animation: mymove 5s steps(4, jump-both);
}

ທຳການທົດສອບດີຕະວັດຍັງຕໍ່ໄປ

ສານດັງ CSS

steps(n, step-position)
ຄູ່ກະທົບ ການອະທິບາຍ
n ສະຫຼຸບ. ພວກທ່ານຕ້ອງບັນທຶກຈາກການກໍານົດຈຸດສະຖານະຂະບວນ/ຄວາມກະຈາຍ.
step-position

ຄຳລົງຄຳແນະນຳ. ພວກທ່ານສາມາດຕິດຕາມຄຳຕອບແບບກ່າວຫຼັງນີ້:

  • jump-start ຫຼື start: ການຍ້າຍສຸດທ້າຍຈະເກີດຂຶ້ນໃນຕອນທີ່ການສະແດງເລີ່ມຕົ້ນ.
  • jump-end ຫຼື end: ການຍ້າຍສຸດທ້າຍຈະເກີດຂຶ້ນໃນຕອນທີ່ການສະແດງສົງຄາມ. end ແມ່ນຄູ່ກະທົບເມື່ອຫຼືບໍ່ມີຄວາມຕ້ອງການ.
  • jump-none: ບໍ່ມີການຍ້າຍກ່ອນຫຼືຫຼັງ
  • jump-both: ການຍ້າຍກ່ອນແລະຫຼັງທັງສອງກັນ

ລາຍລະອຽດດ້ານເຕັກນິກ

ສະຖານະຂະບວນ: CSS Easing Functions Level 1

ການສະໜັບສະໜູນບູຊາລີ

ໄດ້ສະແດງຈາກບັນທຶກທີ່ຢູ່ໃນຕາມການບໍລິການຂອງບູຊາລີທີ່ເປັນບູຊາລີທີ່ສະໜັບສະໜູນການນຳໃຊ້ບູຊາລີນີ້ຢ່າງເຕັມທີ່ສຸດ.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

ບັນດາຫຼັກສາກ່ຽວຂ້ອງ

ກ່ຽວກັບ:ປະສົມບານບານລາຍ CSS animation

ກ່ຽວກັບ:ປະສົມບານບານລາຍ CSS animation-timing-function