ການປ່ຽນສັນຍາວິດີໂອ

ການປ່ຽນສັນຍາວິດີໂອ

CSS ສະແດງຄືນຈະອະນຸຍາດໃຫ້ເຮົາປ່ຽນຄູ່ມູນທຳມະຊາດພາສາພາຍໃນເວລາທີ່ຈະສະແດງຄືນ.

ຍັງຈະສົ່ງຄູ່ມູນມູນຈຸດຫົວຂໍ້ທີ່ຈະຮຽນຄູ່ມູນສະແດງຄືນ CSS:

CSS

ໃນປະຈຸບັນທີ່ເຮົາຈະຮຽນຄູ່ມູນທີ່ຈະຮຽນ:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

ການສະແດງຄືນຂອງການສະແດງຄືນ

ຈຳນວນຂອງພາສາທີ່ຈະສະແດງຄືນທີ່ຈະສະແດງຄືນທຳອິດຂອງການສະແດງຄືນຂອງຄູ່ມູນພາສາຂອງຄູ່ມູນການສະແດງຄືນ.

ປະກອບ Chrome IE Firefox Safari Opera
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

ບໍ່ຕ້ອງສົງໃສວ່າຈະນຳໃຊ້ CSS ສະແດງຄືນຫຼືບໍ່?

ເພື່ອສ້າງຜົນງານສະແດງຄືນບໍ່ຕ້ອງບັງຄັບສອງຢ່າງທີ່ຈະຮັບການຈັດຕັ້ງ:

  • ຄູ່ມູນ CSS ທີ່ເຈົ້າຈະເພີ່ມຜົນງານ
  • ຄວາມດຳເນີນງານຂອງຜົນງານ

ບໍ່ຕ້ອງສົງໃສ:ຖ້າບໍ່ມີການຈັດຕັ້ງຄູ່ມູນການລະຫວ່າງການດຳເນີນງານທີ່ຈະສະແດງຄືນຫຼາຍກວ່າຫຼາຍທີ່ຈະບໍ່ມີຜົນງານສະແດງຄືນຍ້ອນຄູ່ມູນມີຄວາມຍອດທີ່ 0.

ບົດສະຫຼຸບນີ້ສະແດງຄືນປະກອບສິ່ງຣີດສີແດງ 100px * 100px <div> ທີ່ຈະຈັດຕັ້ງຄູ່ມູນ width ສຳລັບຜົນງານສະແດງຄືນຫຼາຍກວ່າຫຼາຍທີ່ຈະສະແດງຄືນ 2 ວິນາທີ.

ຕົວຢ່າງ

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

ບໍ່ວ່າຄູ່ມູນ CSS (width) ຈະປ່ຽນຫຼາຍທີ່ຈະເລີ່ມຕະຫຼອດຜົນງານສະແດງຄືນ.

ຕອນນີ້ພວກເຮົາຈະຈັດຕັ້ງຄູ່ມູນ width ສຳລັບປະຕິບັດພາບມູນ <div> ເວລາທີ່ຄູ່ມູນຈະຢູ່ພາຍໃນປະກອບສິ່ງ.

ຕົວຢ່າງ

div:hover {
  width: 300px;
}

ທ້າທາຍຄົນເອງ

ບໍ່ຕ້ອງສົງໃສວ່າເວລາທີ່ຄູ່ມູນຈາກປະກອບສິ່ງທີ່ຈະກັບຄືນໄປສະແນນແບບຕົ້ນແລ້ວຫຼາຍກວ່າຫຼາຍທີ່ຈະສະແດງຄືນມາ.

ປ່ຽນແປງຈຸດມູນຄ່າຫຼາຍບັນດາປະກອບ

ຕົວຢ່າງທີ່ສະແຕກການປ່ຽນແປງຂອງປະກອບ width ແລະ height ດຽວກັນ, width ແມ່ນ 2 ວິນາທີ່, height ແມ່ນ 4 ວິນາທີ່:

ຕົວຢ່າງ

div {
  transition: width 2s, height 4s;
}

ທ້າທາຍຄົນເອງ

ກຳນົດຄວາມໄວຂອງຜົນກະທົບສະແຕກ

transition-timing-function ປະກອບກຳນົດຄວາມໄວຂອງຜົນກະທົບສະແຕກ.

ປະກອບ transition-timing-function ສາມາດຍອມຮັບຄຳນວຍຄຸມດັ່ງຕໍ່ມາ:

  • ease - ກຳນົດຜົນກະທົບສະແຕກທີ່ເລີ່ມທີ່ຫຼາຍກວ່າຫຼັງຈາກນຳໃຊ້ການສະແຕກຫຼັງຈາກນຳໃຊ້ການສະແຕກຫຼັງຈາກນຳໃຊ້ການສະແຕກຫຼັງ (ຊົ່ວຄາວ):
  • linear - ກຳນົດການສະແຕກທີ່ມີຄວາມໄວດຽວກັນຈາກເລີ່ມເຖິງຈົບ:
  • ease-in - ກຳນົດການສະແຕກທີ່ເລີ່ມທີ່ຫຼາຍກວ່າ:
  • ease-out - ກຳນົດການສະແຕກທີ່ຈົບທີ່ຫຼາຍກວ່າ:
  • ease-in-out - ກຳນົດການສະແຕກທີ່ເລີ່ມແລະຈົບທີ່ຫຼາຍກວ່າ:
  • cubic-bezier(n,n,n,n) - ອະນຸຍາດທ່ານທີ່ຈະກໍານົດຄຳນວຍຄຸມທີ່ຂອງຄວາມໄວທີ່ຂອງພາສາບົດສາມາດສາມາດສະແດງຄວາມໄວທີ່ຫຼາຍກວ່າ:

ຕົວຢ່າງທີ່ສະແດງວ່າທ່ານສາມາດໃຊ້ຈຸດຄວາມໄວທີ່ຫຼາຍກວ່າ:

ຕົວຢ່າງ

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

ທ້າທາຍຄົນເອງ

ລ່າວຫຼັງຜົນກະທົບສະແຕກ

transition-delay ປະກອບກຳນົດການລ່າວຫຼັງຜົນກະທົບສະແຕກ (ໂດຍວິນາທີເວລາ).

ຕົວຢ່າງທີ່ມີການລ່າວຫຼັງ 1 ວິນາທີ່ກ່ອນການເລີ່ມຕົ້ນ:

ຕົວຢ່າງ

div {
  transition-delay: 1s;
}

ທ້າທາຍຄົນເອງ

ສະແຕກ + ປ່ຽນແປງ

ຕົວຢ່າງທີ່ສະແຕກການປ່ຽນແປງໃຫ້ມີຜົນກະທົບການສະແຕກ:

ຕົວຢ່າງ

div {
  transition: width 2s, height 2s, transform 2s;
}

ທ້າທາຍຄົນເອງ

ຕົວຢ່າງການສະແຕກຫຼາຍກວ່າ

ທ່ານສາມາດຈະກ່າວປະກອບ CSS ການສະແຕກເທື່ອຄັ້ງໜຶ່ງຄືດັ່ງຕໍ່ມາ:

ຕົວຢ່າງ

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

ທ້າທາຍຄົນເອງ

ຫຼືນຳໃຊ້ການກ່າວກັນ: transition ປະກອບ:

ຕົວຢ່າງ

div {
  transition: width 2s linear 1s;
}

ທ້າທາຍຄົນເອງ

ປະກອບ CSS ການສະແຕກ

ມີຕົວເລກທີ່ລະບຸຂອງປະກອບ CSS ການສະແຕກຢູ່ລາຍການດັ່ງຕໍ່ມາ:

ປະກອບ ການອະທິບາຍ
transition 简写属性，用于将四个过渡属性设置为单一属性。
transition-delay 规定过渡效果的延迟（以秒计）。
transition-duration 规定过渡效果要持续多少秒或毫秒。
transition-property 规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function 规定过渡效果的速度曲线。