ຮູບພາບນີ້: ທ່ານເຂົ້າຮ່ວມໂຄງການໃຫມ່, ເຂົ້າໄປໃນ codebase, ແລະພາຍໃນສອງສາມຊົ່ວໂມງທໍາອິດ, ທ່ານຄົ້ນພົບບາງສິ່ງບາງຢ່າງທີ່ຄຸ້ນເຄີຍທີ່ຫນ້າເສົ້າໃຈ. ກະແຈກກະຈາຍໄປທົ່ວແຜ່ນສະໄຕລ໌, ທ່ານພົບຫຼາຍຄໍານິຍາມ @keyframes ສໍາລັບພາບເຄື່ອນໄຫວພື້ນຖານດຽວກັນ. ເອັບເຟັກການເສື່ອມຊາມທີ່ແຕກຕ່າງກັນສາມອັນ, ສອງຫຼືສາມຕົວແປຂອງສະໄລ້, ມືຂອງອະນິເມຊັນຊູມ, ແລະຢ່າງໜ້ອຍສອງອະນິເມຊັນສະປິນທີ່ແຕກຕ່າງກັນເພາະວ່າ, ດີ, ເປັນຫຍັງບໍ່? @keyframes pulse { ຈາກ { ຂະຫນາດ: 1; } ເຖິງ { ຂະຫນາດ: 1.1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { ຂະຫນາດ: 1; } 10%, 40% { ຂະຫນາດ: 1.2; } }
ຖ້າສະຖານະການນີ້ຟັງແລ້ວຄຸ້ນເຄີຍ, ເຈົ້າບໍ່ໄດ້ຢູ່ຄົນດຽວ. ໃນປະສົບການຂອງຂ້ອຍໃນທົ່ວໂຄງການຕ່າງໆ, ຫນຶ່ງໃນໄຊຊະນະໄວທີ່ສອດຄ່ອງທີ່ສຸດທີ່ຂ້ອຍສາມາດຈັດສົ່ງໄດ້ແມ່ນການລວມຕົວແລະການສ້າງມາດຕະຖານຂອງ keyframes. ມັນກາຍເປັນຮູບແບບທີ່ໜ້າເຊື່ອຖືໄດ້ທີ່ຕອນນີ້ຂ້ອຍຫວັງວ່າຈະໄດ້ທຳຄວາມສະອາດນີ້ເປັນໜຶ່ງໃນໜ້າວຽກທຳອິດຂອງຂ້ອຍໃນ codebase ໃໝ່. ເຫດຜົນທາງຫລັງຂອງ Chaos ໄດ້ ການຊໍ້າຊ້ອນນີ້ເຮັດໃຫ້ຄວາມຮູ້ສຶກທີ່ສົມບູນແບບໃນເວລາທີ່ທ່ານຄິດກ່ຽວກັບມັນ. ພວກເຮົາທຸກຄົນໃຊ້ພາບເຄື່ອນໄຫວພື້ນຖານດຽວກັນໃນການເຮັດວຽກປະຈໍາວັນຂອງພວກເຮົາ: ຈາງລົງ, ສະໄລ້, ຊູມ, ສະປິນ, ແລະຜົນກະທົບທົ່ວໄປອື່ນໆ. ພາບເຄື່ອນໄຫວເຫຼົ່ານີ້ແມ່ນຂ້ອນຂ້າງກົງໄປກົງມາ, ແລະມັນງ່າຍທີ່ຈະຕີຄໍານິຍາມ @keyframes ຢ່າງໄວວາເພື່ອເຮັດໃຫ້ວຽກງານສໍາເລັດ. ໂດຍບໍ່ມີລະບົບອະນິເມຊັນທີ່ເປັນສູນກາງ, ນັກພັດທະນາຂຽນຄີເຟຣມເຫຼົ່ານີ້ໂດຍທໍາມະຊາດ, ໂດຍບໍ່ຮູ້ຕົວວ່າພາບເຄື່ອນໄຫວທີ່ຄ້າຍຄືກັນມີຢູ່ບ່ອນອື່ນໃນ codebase. ນີ້ແມ່ນເລື່ອງທົ່ວໄປໂດຍສະເພາະໃນເວລາທີ່ເຮັດວຽກໃນສະຖາປັດຕະຍະກໍາທີ່ອີງໃສ່ອົງປະກອບ (ທີ່ພວກເຮົາສ່ວນໃຫຍ່ເຮັດໃນມື້ນີ້), ຍ້ອນວ່າທີມງານມັກຈະເຮັດວຽກຂະຫນານກັນໃນທົ່ວພາກສ່ວນຕ່າງໆຂອງຄໍາຮ້ອງສະຫມັກ. ຜົນໄດ້ຮັບ? ຄວາມວຸ່ນວາຍຂອງສັດ. ບັນຫາຂະຫນາດນ້ອຍ ບັນຫາທີ່ຊັດເຈນທີ່ສຸດກັບການຊໍ້າຊ້ອນຂອງຄີເຟຣມແມ່ນເສຍເວລາໃນການພັດທະນາ ແລະລະຫັດທີ່ບໍ່ຈໍາເປັນ. ຄໍານິຍາມຄີເຟຣມຫຼາຍອັນໝາຍເຖິງຫຼາຍບ່ອນເພື່ອອັບເດດເມື່ອຄວາມຕ້ອງການປ່ຽນແປງ. ຈໍາເປັນຕ້ອງໄດ້ປັບໄລຍະເວລາຂອງການເຄື່ອນໄຫວມະລາຍຫາຍໄປຂອງທ່ານ? ທ່ານຈະຕ້ອງລ່າທຸກຕົວຢ່າງໃນທົ່ວ codebase ຂອງທ່ານ. ຕ້ອງການມາດຕະຖານການທໍາງານການຜ່ອນຄາຍ? ໂຊກດີຊອກຫາການປ່ຽນແປງທັງຫມົດ. ການຄູນຂອງຈຸດບໍາລຸງຮັກສານີ້ເຮັດໃຫ້ແມ້ແຕ່ອະນິເມຊັນງ່າຍດາຍປັບປຸງວຽກງານທີ່ໃຊ້ເວລາຫຼາຍ. ບັນຫາໃຫຍ່ກວ່າ ການຊໍ້າຊ້ອນຂອງຄີເຟຣມນີ້ສ້າງບັນຫາທີ່ຂີ້ຮ້າຍກວ່າທີ່ລີ້ຢູ່ໃຕ້ພື້ນຜິວ: ດັກຈັບຂອບເຂດທົ່ວໂລກ. ເຖິງແມ່ນວ່າໃນເວລາທີ່ເຮັດວຽກກັບສະຖາປັດຕະທີ່ອີງໃສ່ອົງປະກອບ, keyframes CSS ສະເຫມີຖືກກໍານົດຢູ່ໃນຂອບເຂດທົ່ວໂລກ. ນີ້ຫມາຍຄວາມວ່າ keyframes ທັງຫມົດນໍາໃຊ້ກັບອົງປະກອບທັງຫມົດ. ສະເໝີ. ແມ່ນແລ້ວ, ອານິເມຊັນຂອງທ່ານບໍ່ຈໍາເປັນຕ້ອງໃຊ້ຄີເຟຣມທີ່ທ່ານກໍານົດໄວ້ໃນອົງປະກອບຂອງທ່ານ. ມັນໃຊ້ຄີເຟຣມສຸດທ້າຍທີ່ກົງກັບຊື່ດຽວກັນກັບທີ່ໄດ້ຖືກໂຫລດຢູ່ໃນຂອບເຂດທົ່ວໂລກ. ຕາບໃດທີ່ຄີເຟຣມທັງໝົດຂອງເຈົ້າຄືກັນ, ນີ້ອາດເບິ່ງຄືວ່າເປັນບັນຫາເລັກນ້ອຍ. ແຕ່ເວລາທີ່ທ່ານຕ້ອງການປັບແຕ່ງພາບເຄື່ອນໄຫວສໍາລັບກໍລະນີການນໍາໃຊ້ສະເພາະ, ທ່ານມີບັນຫາ, ຫຼືຮ້າຍແຮງກວ່າເກົ່າ, ທ່ານຈະເປັນຜູ້ທີ່ເຮັດໃຫ້ເກີດພວກມັນ. ບໍ່ວ່າອະນິເມຊັນຂອງທ່ານຈະບໍ່ເຮັດວຽກເພາະວ່າອົງປະກອບອື່ນທີ່ໂຫລດມາຫຼັງຂອງເຈົ້າ, ຂຽນທັບຄີເຟຣມຂອງເຈົ້າ, ຫຼືອົງປະກອບຂອງເຈົ້າໂຫລດຫຼ້າສຸດ ແລະປ່ຽນພຶດຕິກຳການເໜັງຕີງໂດຍບັງເອີນສຳລັບທຸກອົງປະກອບອື່ນໂດຍໃຊ້ຊື່ຂອງຄີເຟຣມນັ້ນ, ແລະເຈົ້າອາດບໍ່ຮູ້ຕົວ. ນີ້ແມ່ນຕົວຢ່າງທີ່ງ່າຍດາຍທີ່ສະແດງໃຫ້ເຫັນເຖິງບັນຫາ: .component-one { /* ຮູບແບບອົງປະກອບ */ ການເຄື່ອນໄຫວ: ກໍາມະຈອນເຕັ້ນ 1s ງ່າຍໃນການອອກ infinite alternate; }
/* ຄໍານິຍາມ @keyframes ນີ້ຈະບໍ່ເຮັດວຽກ */ @keyframes pulse { ຈາກ { ຂະຫນາດ: 1; } ເຖິງ { ຂະຫນາດ: 1.1; } }
/* ຕໍ່ມາໃນລະຫັດ... */
.ສ່ວນປະກອບ-ສອງ { /* ຮູບແບບອົງປະກອບ */ ການເຄື່ອນໄຫວ: pulse 1s ງ່າຍໃນ-ອອກ infinite; }
/* ຄີເຟຣມນີ້ຈະນຳໃຊ້ກັບທັງສອງອົງປະກອບ*/ @keyframes pulse { 0%, 20%, 100% { ຂະຫນາດ: 1; } 10%, 40% { ຂະຫນາດ: 1.2; } }
ທັງສອງອົງປະກອບໃຊ້ຊື່ສັດດຽວກັນ, ແຕ່ຄໍານິຍາມ @keyframes ທີສອງຂຽນທັບອັນທໍາອິດ. ໃນປັດຈຸບັນທັງສອງອົງປະກອບຫນຶ່ງແລະອົງປະກອບສອງຈະໃຊ້ຄີເຟຣມທີສອງ, ໂດຍບໍ່ຄໍານຶງເຖິງອົງປະກອບທີ່ກໍານົດວ່າຄີເຟຣມໃດ. ເບິ່ງ Pen Keyframes Tokens - Demo 1 [forked] ໂດຍ Amit Sheen. ສ່ວນທີ່ຮ້າຍແຮງທີ່ສຸດ? ນີ້ມັກຈະເຮັດວຽກຢ່າງສົມບູນໃນການພັດທະນາທ້ອງຖິ່ນແຕ່ແຕກແຍກຢ່າງລຶກລັບໃນການຜະລິດໃນເວລາທີ່ຂະບວນການສ້າງການປ່ຽນແປງຄໍາສັ່ງການໂຫຼດຂອງ stylesheets ຂອງທ່ານ. ທ່ານສິ້ນສຸດດ້ວຍພາບເຄື່ອນໄຫວທີ່ມີລັກສະນະແຕກຕ່າງກັນໂດຍອີງຕາມອົງປະກອບໃດທີ່ຖືກໂຫລດແລະໃນລໍາດັບໃດ. ການແກ້ໄຂ: Unified Keyframes ຄໍາຕອບຂອງຄວາມວຸ່ນວາຍນີ້ແມ່ນງ່າຍດາຍທີ່ຫນ້າປະຫລາດໃຈ: ຄີເຟຣມແບບໄດນາມິກທີ່ກໍານົດໄວ້ລ່ວງຫນ້າທີ່ເກັບໄວ້ໃນແຜ່ນຮູບແບບທີ່ແບ່ງປັນ. ແທນທີ່ຈະໃຫ້ທຸກອົງປະກອບກໍານົດຮູບພາບເຄື່ອນໄຫວຂອງຕົນເອງ, ພວກເຮົາສ້າງ keyframes ສູນກາງທີ່ເປັນເອກະສານທີ່ດີ, ງ່າຍທີ່ຈະການນໍາໃຊ້, ການຮັກສາ, ແລະເຫມາະສົມກັບຄວາມຕ້ອງການສະເພາະຂອງໂຄງການຂອງທ່ານ. ຄິດວ່າມັນເປັນ keyframes tokens. ເຊັ່ນດຽວກັນກັບພວກເຮົາໃຊ້ tokens ສໍາລັບສີແລະໄລຍະຫ່າງ, ແລະພວກເຮົາຫຼາຍຄົນໄດ້ໃຊ້ tokens ສໍາລັບຄຸນສົມບັດຂອງການເຄື່ອນໄຫວ, ເຊັ່ນ: ໄລຍະເວລາແລະຫນ້າທີ່ຜ່ອນຄາຍ, ເປັນຫຍັງບໍ່ໃຊ້ tokens ສໍາລັບ keyframes ເຊັ່ນກັນ? ວິທີການນີ້ສາມາດປະສົມປະສານຢ່າງເປັນທໍາມະຊາດກັບການເຮັດວຽກຂອງ token ການອອກແບບໃນປະຈຸບັນທີ່ທ່ານກໍາລັງໃຊ້, ໃນຂະນະທີ່ແກ້ໄຂບັນຫາຂະຫນາດນ້ອຍ (ການຊໍ້າຊ້ອນລະຫັດ) ແລະບັນຫາໃຫຍ່ກວ່າ (ຄວາມຂັດແຍ້ງກ່ຽວກັບຂອບເຂດທົ່ວໂລກ) ໃນຄັ້ງດຽວ. ແນວຄວາມຄິດແມ່ນກົງໄປກົງມາ: ສ້າງແຫຼ່ງຄວາມຈິງອັນດຽວສໍາລັບພາບເຄື່ອນໄຫວທົ່ວໄປຂອງພວກເຮົາທັງຫມົດ. ແຜ່ນສະໄຕລ໌ທີ່ແບ່ງປັນນີ້ປະກອບດ້ວຍຄີເຟຣມທີ່ສ້າງຂຶ້ນຢ່າງລະມັດລະວັງເຊິ່ງກວມເອົາຮູບແບບອະນິເມຊັນທີ່ໂຄງການຂອງພວກເຮົາໃຊ້ຕົວຈິງ. ບໍ່ຕ້ອງເດົາອີກຕໍ່ໄປວ່າພາບເຄື່ອນໄຫວທີ່ຫຼົງໄຫຼມີຢູ່ບ່ອນໃດບ່ອນໜຶ່ງໃນ codebase ຂອງພວກເຮົາ. ບໍ່ມີການຂຽນທັບອະນິເມຊັນຈາກອົງປະກອບອື່ນໂດຍບັງເອີນອີກຕໍ່ໄປ. ແຕ່ນີ້ແມ່ນກຸນແຈ: ເຫຼົ່ານີ້ແມ່ນບໍ່ພຽງແຕ່ພາບເຄື່ອນໄຫວທີ່ສໍາເນົາແບບຄົງທີ່. ພວກມັນຖືກອອກແບບມາເພື່ອໃຫ້ມີການເຄື່ອນໄຫວແລະປັບແຕ່ງໄດ້ໂດຍຜ່ານຄຸນສົມບັດທີ່ກໍາຫນົດເອງຂອງ CSS, ຊ່ວຍໃຫ້ພວກເຮົາຮັກສາຄວາມສອດຄ່ອງໃນຂະນະທີ່ຍັງມີຄວາມຍືດຫຍຸ່ນໃນການປັບຕົວພາບເຄື່ອນໄຫວໃນກໍລະນີການນໍາໃຊ້ສະເພາະ, ເຊັ່ນວ່າທ່ານຕ້ອງການພາບເຄື່ອນໄຫວ "ກໍາມະຈອນ" ທີ່ໃຫຍ່ກວ່າເລັກນ້ອຍຢູ່ໃນສະຖານທີ່ດຽວ. ການສ້າງ Keyframes Token ທໍາອິດ ຫນຶ່ງໃນຫມາກໄມ້ຫ້ອຍຕ່ໍາທໍາອິດທີ່ພວກເຮົາຄວນແກ້ໄຂແມ່ນ "fade-in" ການເຄື່ອນໄຫວ. ໃນຫນຶ່ງຂອງໂຄງການທີ່ຜ່ານມາຂອງຂ້ອຍ, ຂ້າພະເຈົ້າໄດ້ພົບເຫັນຫຼາຍກວ່າຫຼາຍສິບຄໍານິຍາມຂອງຄວາມຈືດໆແຍກຕ່າງຫາກ, ແລະແມ່ນແລ້ວ, ພວກມັນທັງຫມົດພຽງແຕ່ເຄື່ອນໄຫວຄວາມໂປ່ງໃສຈາກ 0 ຫາ 1. ດັ່ງນັ້ນ, ໃຫ້ພວກເຮົາສ້າງຮູບແບບໃຫມ່, ໂທຫາມັນ kf-tokens.css, ນໍາເຂົ້າມັນເຂົ້າໄປໃນໂຄງການຂອງພວກເຮົາ, ແລະວາງ keyframes ຂອງພວກເຮົາດ້ວຍຄໍາຄິດຄໍາເຫັນທີ່ເຫມາະສົມພາຍໃນມັນ. /* keyframes-tokens.css */
/* * Fade In - ພາບເຄື່ອນໄຫວທາງເຂົ້າມະລາຍຫາຍໄປ * ການນໍາໃຊ້: ການເຄື່ອນໄຫວ: kf-fade-in 0.3s ງ່າຍອອກ; */ @keyframes kf-fade-in { ຈາກ { opacity: 0; } ເຖິງ { opacity: 1; } }
ການປະກາດ @keyframes ດຽວນີ້ຈະປ່ຽນແທນພາບເຄື່ອນໄຫວທີ່ຫຼົງໄຫຼທີ່ກະແຈກກະຈາຍໄປທົ່ວ codebase ຂອງພວກເຮົາ. ສະອາດ, ງ່າຍດາຍ, ແລະສາມາດໃຊ້ໄດ້ທົ່ວໂລກ. ແລະໃນປັດຈຸບັນທີ່ພວກເຮົາໄດ້ກໍານົດ token ນີ້, ພວກເຮົາສາມາດນໍາໃຊ້ມັນຈາກອົງປະກອບໃດຫນຶ່ງໃນທົ່ວໂຄງການຂອງພວກເຮົາ: .modal { ການເຄື່ອນໄຫວ: kf-fade-in 0.3s ງ່າຍອອກ; }
.ຄຳແນະນຳ { ການເຄື່ອນໄຫວ: kf-fade-in 0.2s ງ່າຍໃນ-ອອກ; }
.ການແຈ້ງເຕືອນ { ການເຄື່ອນໄຫວ: kf-fade-in 0.5s ງ່າຍອອກ; }
ເບິ່ງ Pen Keyframes Tokens - Demo 2 [forked] ໂດຍ Amit Sheen. ໝາຍເຫດ: ພວກເຮົາກຳລັງໃຊ້ຄຳນຳໜ້າ kf ໃນທຸກຊື່ @keyframes ຂອງພວກເຮົາ. ຄໍານໍາຫນ້ານີ້ເຮັດຫນ້າທີ່ເປັນ namespace ທີ່ປ້ອງກັນການຂັດແຍ້ງການຕັ້ງຊື່ກັບອະນິເມຊັນທີ່ມີຢູ່ໃນໂຄງການແລະເຮັດໃຫ້ມັນຊັດເຈນທັນທີວ່າ keyframes ເຫຼົ່ານີ້ມາຈາກໄຟລ໌ keyframes tokens ຂອງພວກເຮົາ. ສ້າງສະໄລ້ແບບໄດນາມິກ ຄີເຟຣມ kf-fade-in ເຮັດວຽກໄດ້ດີເພາະມັນງ່າຍດາຍ ແລະ ມີບ່ອນຫວ່າງໜ້ອຍທີ່ຈະສ້າງສິ່ງລົບກວນ. ໃນພາບເຄື່ອນໄຫວອື່ນໆ, ຢ່າງໃດກໍຕາມ, ພວກເຮົາຈໍາເປັນຕ້ອງມີການເຄື່ອນໄຫວຫຼາຍ, ແລະໃນທີ່ນີ້ພວກເຮົາສາມາດ leverage ພະລັງງານອັນໃຫຍ່ຫຼວງຂອງຄຸນສົມບັດ custom CSS. ນີ້ແມ່ນບ່ອນທີ່ keyframes tokens ສ່ອງແສງແທ້ໆເມື່ອທຽບໃສ່ກັບອະນິເມຊັນຄົງທີ່ກະແຈກກະຈາຍ. ໃຫ້ໃຊ້ສະຖານະການທົ່ວໄປ: "ສະໄລ້ໃນ" ອະນິເມຊັນ. ແຕ່ເລື່ອນມາຈາກໃສ? 100px ຈາກຂວາ? 50% ຈາກຊ້າຍ? ມັນຄວນຈະເຂົ້າໄປຈາກເທິງສຸດຂອງໜ້າຈໍບໍ? ຫຼືອາດຈະລອຍຢູ່ໃນລຸ່ມ? ຄວາມເປັນໄປໄດ້ຫຼາຍຢ່າງ, ແຕ່ແທນທີ່ຈະສ້າງ keyframes ແຍກຕ່າງຫາກສໍາລັບແຕ່ລະທິດທາງແລະແຕ່ລະການປ່ຽນແປງ, ພວກເຮົາສາມາດສ້າງ token ປ່ຽນແປງໄດ້ຫນຶ່ງທີ່ປັບຕົວເຂົ້າກັບທຸກສະຖານະການ: /* * Slide In - ພາບເຄື່ອນໄຫວສະໄລ້ທິດທາງ * ໃຊ້ --kf-slide-from ເພື່ອຄວບຄຸມທິດທາງ * ຄ່າເລີ່ມຕົ້ນ: ເລື່ອນຈາກຊ້າຍ (-100%) * ການນໍາໃຊ້: * ພາບເຄື່ອນໄຫວ: kf-slide-in 0.3s ease-out; * --kf-slide-from: -100px 0; // ເລື່ອນຈາກຊ້າຍ * --kf-slide-from: 100px 0; // ເລື່ອນຈາກຂວາ * --kf-slide-from: 0 -50px; // ເລື່ອນຈາກເທິງ */
@keyframes kf-slide-in { ຈາກ { ແປພາສາ: var(--kf-slide-from, -100% 0); } ເຖິງ { ແປ: 0 0; } }
ຕອນນີ້ພວກເຮົາສາມາດໃຊ້ token @keyframes ດຽວນີ້ສຳລັບທິດທາງສະໄລ້ໃດກໍໄດ້ພຽງແຕ່ປ່ຽນ --kf-slide-from custom property: .sidebar { ການເຄື່ອນໄຫວ: kf-slide-in 0.3s ງ່າຍອອກ; /* ໃຊ້ຄ່າເລີ່ມຕົ້ນ: slides ຈາກຊ້າຍ */ }
.ການແຈ້ງເຕືອນ { ການເຄື່ອນໄຫວ: kf-slide-in 0.4s ງ່າຍອອກ; --kf-slide-from: 0 -50px; /* slide ຈາກເທິງ */ }
.modal { ພາບເຄື່ອນໄຫວ: kf-fade-in 0.5ວິ, kf-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* ເລື່ອນຈາກລຸ່ມຂວາ */ }
ວິທີການນີ້ເຮັດໃຫ້ພວກເຮົາມີຄວາມຍືດຫຍຸ່ນທີ່ບໍ່ຫນ້າເຊື່ອໃນຂະນະທີ່ຮັກສາຄວາມສອດຄ່ອງ. ການປະກາດຄີເຟຣມອັນດຽວ, ຄວາມເປັນໄປໄດ້ທີ່ບໍ່ມີຂອບເຂດ. ເບິ່ງ Pen Keyframes Tokens - Demo 3 [forked] ໂດຍ Amit Sheen. ແລະຖ້າພວກເຮົາຕ້ອງການເຮັດໃຫ້ພາບເຄື່ອນໄຫວຂອງພວກເຮົາມີຄວາມຍືດຫຍຸ່ນຫຼາຍຂຶ້ນ, ອະນຸຍາດໃຫ້ມີ "ສະໄລ້ອອກ" ເອັບເຟັກເຊັ່ນດຽວກັນ, ພວກເຮົາສາມາດພຽງແຕ່ເພີ່ມ --kf-slide-to custom property, ຄ້າຍຄືກັນກັບສິ່ງທີ່ພວກເຮົາຈະເຫັນໃນພາກຕໍ່ໄປ. ຄີເຟຣມຊູມສອງທິດທາງ ອະນິເມຊັນທົ່ວໄປອີກອັນໜຶ່ງທີ່ຊໍ້າກັນໃນທົ່ວໂຄງການແມ່ນຜົນກະທົບ “ຊູມ”. ບໍ່ວ່າຈະເປັນການປັບຂະໜາດທີ່ລະອຽດອ່ອນສຳລັບຂໍ້ຄວາມທີ່ເຮັດເຂົ້າໜົມ, ການຊູມເຂົ້າເບິ່ງແບບອັດສະຈັນ, ຫຼືການປັບຂະໜາດທີ່ອ່ອນໂຍນສຳລັບຫົວຂໍ້, ການຊູມພາບເຄື່ອນໄຫວແມ່ນມີຢູ່ທົ່ວທຸກແຫ່ງ. ແທນທີ່ຈະສ້າງຄີເຟຣມແຍກຕ່າງຫາກສໍາລັບແຕ່ລະຄ່າຂະຫນາດ, ໃຫ້ສ້າງຊຸດຄີເຟຣມ kf-zoom ແບບຍືດຫຍຸ່ນຫນຶ່ງຊຸດ:
/* * ຊູມ - ພາບເຄື່ອນໄຫວ * ໃຊ້ --kf-zoom-from ແລະ --kf-zoom-to ເພື່ອຄວບຄຸມຄ່າຂະໜາດ * ຄ່າເລີ່ມຕົ້ນ: ຊູມຈາກ 80% ເປັນ 100% (0.8 ຫາ 1) * ການນໍາໃຊ້: * ພາບເຄື່ອນໄຫວ: kf-zoom 0.2s ງ່າຍອອກ; * --kf-zoom-from: 0.5; --kf-zoom-to: 1; // ຊູມຈາກ 50% ຫາ 100% * --kf-zoom-from: 1; --kf-zoom-to: 0; // ຊູມຈາກ 100% ຫາ 0% * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // ຊູມຈາກ 100% ຫາ 110% */
@keyframes kf-zoom { ຈາກ { ຂະຫນາດ: var(--kf-zoom-from, 0.8); } ເຖິງ { ຂະຫນາດ: var(--kf-zoom-to, 1); } }
ດ້ວຍຄໍານິຍາມອັນດຽວ, ພວກເຮົາສາມາດບັນລຸການປ່ຽນແປງການຊູມທີ່ພວກເຮົາຕ້ອງການ: .ເຂົ້າຈີ່ { ພາບເຄື່ອນໄຫວ: kf-slide-in 0.2ວິ, kf-zoom 0.4s ງ່າຍອອກ; --kf-slide-from: 0 100%; /* slide ຈາກເທິງ */ /* ໃຊ້ການຊູມເລີ່ມຕົ້ນ: ຂະໜາດຈາກ 80% ຫາ 100% */ }
.modal { ການເຄື່ອນໄຫວ: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0; /* ຊູມຢ່າງຫຼວງຫຼາຍຈາກ 0% ຫາ 100% */ }
.ຫົວຂໍ້ { ພາບເຄື່ອນໄຫວ: kf-fade-in 2s, kf-zoom 2s ງ່າຍໃນ; --kf-zoom-from: 1.2; --kf-zoom-to: 0.8; /* ຫຼຸດລົງ */ }
ຄ່າເລີ່ມຕົ້ນຂອງ 0.8 (80%) ເຮັດວຽກຢ່າງສົມບູນແບບສໍາລັບອົງປະກອບ UI ສ່ວນໃຫຍ່, ເຊັ່ນ: ຂໍ້ຄວາມ toast ແລະບັດ, ໃນຂະນະທີ່ຍັງງ່າຍທີ່ຈະປັບແຕ່ງສໍາລັບກໍລະນີພິເສດ. ເບິ່ງ Pen Keyframes Tokens - Demo 4 [forked] ໂດຍ Amit Sheen. ທ່ານອາດຈະໄດ້ສັງເກດເຫັນບາງສິ່ງບາງຢ່າງທີ່ຫນ້າສົນໃຈໃນຕົວຢ່າງທີ່ຜ່ານມາ: ພວກເຮົາໄດ້ປະສົມປະສານພາບເຄື່ອນໄຫວ. ຫນຶ່ງໃນຂໍ້ໄດ້ປຽບທີ່ສໍາຄັນຂອງການເຮັດວຽກກັບ @keyframes tokens ແມ່ນວ່າພວກເຂົາຖືກອອກແບບມາເພື່ອປະສົມປະສານກັບກັນແລະກັນ. ອົງປະກອບກ້ຽງນີ້ແມ່ນຕັ້ງໃຈ, ບໍ່ແມ່ນອຸບັດຕິເຫດ. ພວກເຮົາຈະປຶກສາຫາລືກ່ຽວກັບອົງປະກອບພາບເຄື່ອນໄຫວໃນລາຍລະອຽດເພີ່ມເຕີມໃນພາຍຫຼັງ, ລວມທັງບ່ອນທີ່ພວກມັນສາມາດກາຍເປັນບັນຫາໄດ້, ແຕ່ການປະສົມສ່ວນຫຼາຍແມ່ນກົງໄປກົງມາ ແລະງ່າຍຕໍ່ການປະຕິບັດ. ຫມາຍເຫດ: ໃນຂະນະທີ່ຂຽນບົດຄວາມນີ້, ແລະອາດຈະເປັນຍ້ອນການຂຽນມັນ, ຂ້ອຍພົບວ່າຕົນເອງຄິດໃຫມ່ກ່ຽວກັບຄວາມຄິດທັງຫມົດຂອງການເຂົ້າ. ດ້ວຍຄວາມກ້າວຫນ້າທີ່ຜ່ານມາທັງຫມົດໃນ CSS, ພວກເຮົາຍັງຕ້ອງການພວກມັນຢູ່ບໍ? ໂຊກດີ, Adam Argyle ຄົ້ນຫາຄໍາຖາມດຽວກັນແລະສະແດງໃຫ້ພວກເຂົາຢູ່ໃນ blog ຂອງລາວ. ນີ້ບໍ່ໄດ້ຂັດກັບສິ່ງທີ່ຂຽນຢູ່ນີ້, ແຕ່ມັນສະເຫນີວິທີການທີ່ສົມຄວນພິຈາລະນາ, ໂດຍສະເພາະຖ້າໂຄງການຂອງເຈົ້າອີງໃສ່ການເຄື່ອນໄຫວທາງເຂົ້າຫຼາຍ. ພາບເຄື່ອນໄຫວຢ່າງຕໍ່ເນື່ອງ ໃນຂະນະທີ່ອະນິເມຊັນທາງເຂົ້າ, ເຊັ່ນ: “ຈາງລົງ”, “ສະໄລ້”, ແລະ “ຊູມ” ເກີດຂຶ້ນເທື່ອດຽວແລ້ວຢຸດ, ການເຄື່ອນໄຫວຕໍ່ເນື່ອງຈະໝູນວຽນຢ່າງບໍ່ຢຸດຢັ້ງເພື່ອດຶງດູດຄວາມສົນໃຈ ຫຼືສະແດງການເຄື່ອນໄຫວຢ່າງຕໍ່ເນື່ອງ. ສອງພາບເຄື່ອນໄຫວຢ່າງຕໍ່ເນື່ອງທົ່ວໄປທີ່ສຸດທີ່ຂ້ອຍພົບແມ່ນ "ສະປິນ" (ສໍາລັບຕົວຊີ້ວັດການໂຫຼດ) ແລະ "ກໍາມະຈອນ" (ສໍາລັບການເນັ້ນໃສ່ອົງປະກອບທີ່ສໍາຄັນ). ພາບເຄື່ອນໄຫວເຫຼົ່ານີ້ນຳສະເໜີສິ່ງທ້າທາຍທີ່ເປັນເອກະລັກເມື່ອເວົ້າເຖິງການສ້າງ keyframes tokens. ບໍ່ເຫມືອນກັບອະນິເມຊັນທາງເຂົ້າທີ່ປົກກະຕິຈະໄປຈາກລັດໜຶ່ງໄປຫາອີກລັດໜຶ່ງ, ອະນິເມຊັນແບບຕໍ່ເນື່ອງຕ້ອງປັບແຕ່ງໄດ້ຫຼາຍໃນຮູບແບບພຶດຕິກຳຂອງມັນ. ຫມໍ Spin ທຸກໆໂຄງການເບິ່ງຄືວ່າຈະໃຊ້ອະນິເມຊັນ spin ຫຼາຍ. ບາງຄົນໝູນຕາມເຂັມໂມງ, ບາງຄົນໝູນຕາມເຂັມໂມງ. ບາງຄົນເຮັດການຫມຸນ 360 ອົງສາອັນດຽວ, ຄົນອື່ນເຮັດຫຼາຍຮອບເພື່ອໃຫ້ໄດ້ຜົນໄວ. ແທນທີ່ຈະສ້າງຄີເຟຣມແຍກຕ່າງຫາກສໍາລັບແຕ່ລະການປ່ຽນແປງ, ໃຫ້ພວກເຮົາສ້າງການຫມຸນແບບຍືດຫຍຸ່ນຫນຶ່ງທີ່ຈັດການກັບສະຖານະການທັງຫມົດ:
/* * Spin - ການເຄື່ອນໄຫວຫມຸນ * ໃຊ້ --kf-spin-from ແລະ --kf-spin-to ເພື່ອຄວບຄຸມໄລຍະການຫມຸນ * ໃຊ້ --kf-spin-turns ເພື່ອຄວບຄຸມຈໍານວນການຫມຸນ * ຄ່າເລີ່ມຕົ້ນ: rotates ຈາກ 0deg ກັບ 360deg (1 ພືດຫມູນວຽນເຕັມ) * ການນໍາໃຊ້: * ພາບເຄື່ອນໄຫວ: kf-spin 1s linear infinite; * --kf-spin-turns: 2; // 2 ການຫມຸນເຕັມ * --kf-spin-from: 0deg; --kf-spin-to: 180deg; // ເຄິ່ງຫມູນວຽນ * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // ທວນເຂັມໂມງ */
@keyframes kf-spin { ຈາກ { rotate: var(--kf-spin-from, 0deg); } ເຖິງ { rotate: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
ດຽວນີ້ພວກເຮົາສາມາດສ້າງການປ່ຽນແປງສະປິນທີ່ພວກເຮົາມັກ:
.loading-spinner { ການເຄື່ອນໄຫວ: kf-spin 1s linear infinite; /* ໃຊ້ຄ່າເລີ່ມຕົ້ນ: ໝຸນຈາກ 0deg ຫາ 360deg */ }
.fast-loader { animation: kf-spin 1.2s ງ່າຍໃນ-ອອກ infinite alternate; --kf-spin-turns: 3; /* 3 ການຫມຸນເຕັມສໍາລັບແຕ່ລະທິດທາງຕໍ່ວົງຈອນ*/ }
.steped-reverse { ການເຄື່ອນໄຫວ: kf-spin 1.5s ຂັ້ນຕອນ(8) ອັນເປັນນິດ; --kf-spin-to: -360deg; /* ທວນເຂັມໂມງ */ }
.subtle-wiggle { animation: kf-spin 2s ງ່າຍ-in-out infinite alternate; --kf-spin-from: -16deg; --kf-spin-to: 32deg; /* wiggle 36 deg: ລະຫວ່າງ -18deg ແລະ +18deg */ }
ເບິ່ງ Pen Keyframes Tokens - Demo 5 [forked] ໂດຍ Amit Sheen. ຄວາມງາມຂອງວິທີການນີ້ແມ່ນວ່າ keyframes ດຽວກັນເຮັດວຽກສໍາລັບການໂຫຼດ spinners, rotating icon, wiggle effects, ແລະແມ້ກະທັ້ງຫຼາຍການເຄື່ອນໄຫວສະລັບສັບຊ້ອນ. The Pulse Paradox ການເຄື່ອນໄຫວຂອງກໍາມະຈອນແມ່ນ trickier ເພາະວ່າພວກເຂົາສາມາດ "ກໍາມະຈອນ" ຄຸນສົມບັດທີ່ແຕກຕ່າງກັນ. ບາງຄົນກະພິບຂະຫນາດ, ຄົນອື່ນກະພິບຄວາມໂປ່ງໃສ, ແລະບາງຄຸນສົມບັດສີຂອງກໍາມະຈອນເຊັ່ນ: ຄວາມສະຫວ່າງຫຼືຄວາມອີ່ມຕົວ. ແທນທີ່ຈະສ້າງ keyframes ແຍກຕ່າງຫາກສໍາລັບແຕ່ລະຊັບສິນ, ພວກເຮົາສາມາດສ້າງ keyframes ທີ່ເຮັດວຽກກັບຊັບສິນ CSS ໃດໆ. ນີ້ແມ່ນຕົວຢ່າງຂອງ Pulse keyframe ທີ່ມີຕົວເລືອກຂະໜາດ ແລະ opacity:
/* * Pulse - ເຄື່ອນໄຫວກະພິບ * ໃຊ້ --kf-pulse-scale-from ແລະ --kf-pulse-scale-to ເພື່ອຄວບຄຸມລະດັບຂະຫນາດ * ໃຊ້ --kf-pulse-opacity-from ແລະ --kf-pulse-opacity-ເພື່ອຄວບຄຸມໄລຍະຄວາມໂປ່ງໃສ * ຄ່າເລີ່ມຕົ້ນ: ບໍ່ມີກໍາມະຈອນ (ຄ່າທັງໝົດ 1) * ການນໍາໃຊ້: * ພາບເຄື່ອນໄຫວ: kf-pulse 2s ງ່າຍ-in-out infinite alternate; * --kf-pulse-scale-ຈາກ: 0.95; --kf-pulse-scale-to: 1.05; // ຂະຫນາດກໍາມະຈອນ * --kf-pulse-opacity-from: 0.7; --kf-pulse-opacity-to: 1; // opacity pulse */
@keyframes kf-pulse { ຈາກ { scale: var(--kf-pulse-scale-from, 1); opacity: var(--kf-pulse-opacity-from, 1); } ເຖິງ { scale: var(--kf-pulse-scale-to, 1); opacity: var(--kf-pulse-opacity-to, 1); } }
ອັນນີ້ສ້າງກໍາມະຈອນທີ່ມີຄວາມຍືດຫຍຸ່ນທີ່ສາມາດເຄື່ອນໄຫວຄຸນສົມບັດຫຼາຍຢ່າງ: .ໂທຫາເພື່ອປະຕິບັດ { ການເຄື່ອນໄຫວ: kf-pulse 0.6s infinite alternate; --kf-pulse-opacity-from: 0.5; /* ກຳມະຈອນຄວາມມືດ */ }
.notification-dot { ການເຄື່ອນໄຫວ: kf-pulse 0.6s ງ່າຍ-in-out infinite alternate; --kf-pulse-scale-ຈາກ: 0.9; --kf-pulse-scale-to: 1.1; /*ກຳມະຈອນຂະໜາດ*/ }
.text-highlight { animation: kf-pulse 1.5s ງ່າຍ-ອອກ infinite; --kf-pulse-scale-ຈາກ: 0.8; --kf-pulse-opacity-from: 0.2; /* ຂະຫນາດແລະກໍາມະຈອນ opacity */ }
ເບິ່ງ Pen Keyframes Tokens - Demo 6 [forked] ໂດຍ Amit Sheen. ຄີເຟຣມ kf-pulse ດຽວນີ້ສາມາດຈັດການທຸກຢ່າງຈາກການດຶງເອົາຄວາມສົນໃຈເລັກນ້ອຍໄປຈົນເຖິງຈຸດເດັ່ນທີ່ໜ້າຕື່ນຕາຕື່ນໃຈ, ທັງໝົດນີ້ງ່າຍໃນການປັບແຕ່ງ. Advanced Easing ຫນຶ່ງໃນສິ່ງທີ່ດີກ່ຽວກັບການນໍາໃຊ້ keyframes tokens ແມ່ນການຂະຫຍາຍຫ້ອງສະຫມຸດອະນິເມຊັນຂອງພວກເຮົາໄດ້ງ່າຍແລະສະຫນອງຜົນກະທົບທີ່ນັກພັດທະນາສ່ວນໃຫຍ່ຈະບໍ່ລົບກວນການຂຽນຈາກຈຸດເລີ່ມຕົ້ນ, ເຊັ່ນ elastic ຫຼື bounce. ນີ້ແມ່ນຕົວຢ່າງຂອງ token keyframes "bounce" ງ່າຍໆທີ່ໃຊ້ --kf-bounce-from custom property ເພື່ອຄວບຄຸມຄວາມສູງຂອງການໂດດ. /* * Bounce - ພາບເຄື່ອນໄຫວທາງເຂົ້າ bouncing * ໃຊ້ --kf-bounce-from ເພື່ອຄວບຄຸມຄວາມສູງຂອງການໂດດ * ຄ່າເລີ່ມຕົ້ນ: ໂດດຈາກ 100vh (ປິດໜ້າຈໍ) * ການນໍາໃຊ້: * ພາບເຄື່ອນໄຫວ: kf-bounce 3s ງ່າຍໃນ; * --kf-bounce-from: 200px; // ໂດດຈາກຄວາມສູງ 200px */
@keyframes kf-bounce { 0% { ແປພາສາ: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { ແປພາສາ: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { ແປພາສາ: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { ແປວ່າ: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { ແປພາສາ: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { ແປພາສາ: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { ແປພາສາ: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { ແປ: 0 0; animation-time-function: ງ່າຍອອກ; } }
ອະນິເມຊັນເຊັ່ນ " elastic" ແມ່ນເລັກນ້ອຍຫຼາຍຍ້ອນການຄິດໄລ່ພາຍໃນຄີເຟຣມ. ພວກເຮົາຈໍາເປັນຕ້ອງກໍານົດ --kf-elastic-from-X ແລະ --kf-elastic-from-Y ແຍກຕ່າງຫາກ (ທັງສອງແມ່ນທາງເລືອກ), ແລະພວກເຂົາຮ່ວມກັນໃຫ້ພວກເຮົາສ້າງທາງເຂົ້າ elastic ຈາກຈຸດໃດຫນຶ່ງໃນຫນ້າຈໍ.
/* * Elastic In - ພາບເຄື່ອນໄຫວທາງເຂົ້າ elastic * ໃຊ້ --kf-elastic-from-X ແລະ --kf-elastic-from-Y ເພື່ອຄວບຄຸມຕໍາແຫນ່ງເລີ່ມຕົ້ນ * ຄ່າເລີ່ມຕົ້ນ: ເຂົ້າຈາກສູນກາງເທິງ (0, -100vh) * ການນໍາໃຊ້: * ພາບເຄື່ອນໄຫວ: kf-elastic-in 2s ງ່າຍ-in-out ທັງສອງ; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // ປ້ອນຈາກ (-50px, -200px) */
@keyframes kf-elastic-in { 0% { ແປວ່າ: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { ແປວ່າ: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { ແປວ່າ: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-from-Y, 0px) * 0.1312); }
44% { ແປວ່າ: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { ແປວ່າ: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { ແປວ່າ: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { ແປວ່າ: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { ແປ: 0 0; } }
ວິທີນີ້ເຮັດໃຫ້ມັນງ່າຍຕໍ່ການໃຊ້ຄືນໃຫມ່ ແລະປັບແຕ່ງຄີເຟຣມຂັ້ນສູງໃນທົ່ວໂຄງການຂອງພວກເຮົາ, ພຽງແຕ່ປ່ຽນຄຸນສົມບັດແບບກຳນົດເອງອັນດຽວ.
.bounce-and-zoom { ພາບເຄື່ອນໄຫວ: kf-bounce 3s ງ່າຍໃນ, kf-zoom 3s linear; --kf-zoom-from: 0; }
.bounce-and-slide { animation-composition: ເພີ່ມ; /* ພາບເຄື່ອນໄຫວທັງສອງໃຊ້ການແປ */ ພາບເຄື່ອນໄຫວ: kf-bounce 3s ງ່າຍໃນ, kf-slide-in 3s ease-out; --kf-slide-from: -200px; }
.elastic-in { animation: kf-elastic-in 2s ease-in-out ທັງສອງ; }
ເບິ່ງ Pen Keyframes Tokens - Demo 7 [forked] ໂດຍ Amit Sheen. ມາຮອດຈຸດນີ້, ພວກເຮົາໄດ້ເຫັນວິທີທີ່ພວກເຮົາສາມາດລວມຄີເຟຣມດ້ວຍວິທີທີ່ສະຫຼາດ ແລະ ມີປະສິດທິພາບ. ແນ່ນອນ, ເຈົ້າອາດຈະຕ້ອງການປັບປ່ຽນສິ່ງຕ່າງໆໃຫ້ເໝາະສົມກັບຄວາມຕ້ອງການຂອງໂຄງການຂອງເຈົ້າໄດ້ດີກວ່າ, ແຕ່ພວກເຮົາໄດ້ກວມເອົາຕົວຢ່າງຂອງພາບເຄື່ອນໄຫວທົ່ວໄປຫຼາຍອັນ ແລະກໍລະນີທີ່ໃຊ້ປະຈໍາວັນ. ແລະດ້ວຍ keyframes tokens ເຫຼົ່ານີ້, ປະຈຸບັນພວກເຮົາມີຕົວສ້າງທີ່ມີປະສິດທິພາບສໍາລັບການສ້າງພາບເຄື່ອນໄຫວທີ່ສອດຄ່ອງ, ຮັກສາໄດ້ໃນທົ່ວໂຄງການທັງຫມົດ. ບໍ່ມີຄີເຟຣມຊ້ຳກັນ, ບໍ່ມີຂໍ້ຂັດແຍ່ງກ່ຽວກັບຂອບເຂດທົ່ວໂລກອີກຕໍ່ໄປ. ພຽງແຕ່ເປັນວິທີທີ່ສະອາດ, ສະດວກໃນການຈັດການທັງຫມົດຄວາມຕ້ອງການຂອງການເຄື່ອນໄຫວຂອງພວກເຮົາ. ແຕ່ຄໍາຖາມທີ່ແທ້ຈິງແມ່ນ: ເຮັດແນວໃດພວກເຮົາປະກອບອາຄານເຫຼົ່ານີ້ຮ່ວມກັນ? ເອົາມັນທັງຫມົດຮ່ວມກັນ ພວກເຮົາໄດ້ເຫັນວ່າການລວມ tokens keyframes ພື້ນຖານແມ່ນງ່າຍດາຍ. ພວກເຮົາບໍ່ຕ້ອງການຫຍັງພິເສດແຕ່ເພື່ອກໍານົດພາບເຄື່ອນໄຫວທໍາອິດ, ກໍານົດອັນທີສອງ, ກໍານົດຕົວແປຕາມຄວາມຕ້ອງການ, ແລະນັ້ນແມ່ນ. /*Fade in + slide in */ .ເຂົ້າຈີ່ { ພາບເຄື່ອນໄຫວ: kf-fade-in 0.4ວິ, kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* ຊູມເຂົ້າ + ຈາງເຂົ້າ */ .modal { ພາບເຄື່ອນໄຫວ: kf-fade-in 0.3ວິ, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0.7; --kf-zoom-to: 1; }
/* ສະໄລ້ເຂົ້າ + ກຳມະຈອນ */ .ການແຈ້ງເຕືອນ { ພາບເຄື່ອນໄຫວ: kf-slide-in 0.5ວິ, kf-pulse 1.2s ease-in-out infinite alternate; --kf-slide-from: -100px 0; --kf-pulse-scale-ຈາກ: 0.95; --kf-pulse-scale-to: 1.05; }
ການປະສົມປະສານເຫຼົ່ານີ້ເຮັດວຽກໄດ້ສວຍງາມເພາະວ່າແຕ່ລະອະນິເມຊັນເປົ້າຫມາຍລັກສະນະທີ່ແຕກຕ່າງກັນ: ຄວາມໂປ່ງໃສ, ການຫັນປ່ຽນ (ແປ / ຂະຫນາດ), ແລະອື່ນໆ. ແຕ່ບາງຄັ້ງກໍ່ມີຄວາມຂັດແຍ້ງ, ແລະພວກເຮົາຈໍາເປັນຕ້ອງຮູ້ວ່າເປັນຫຍັງແລະວິທີການຈັດການກັບພວກມັນ. ເມື່ອອະນິເມຊັນສອງຕົວພະຍາຍາມສ້າງພາບເຄື່ອນໄຫວໃນລັກສະນະດຽວກັນ — ຕົວຢ່າງ, ທັງຂະໜາດພາບເຄື່ອນໄຫວ ຫຼືຄວາມໂປ່ງໃສຂອງພາບເຄື່ອນໄຫວທັງສອງ — ຜົນໄດ້ຮັບຈະບໍ່ເປັນອັນທີ່ທ່ານຄາດຫວັງ. ໂດຍຄ່າເລີ່ມຕົ້ນ, ມີພຽງໜຶ່ງໃນອະນິເມຊັນເທົ່ານັ້ນທີ່ຖືກນຳໃຊ້ກັບຄຸນສົມບັດນັ້ນ, ເຊິ່ງເປັນອັນສຸດທ້າຍໃນລາຍການອະນິເມຊັນ. ນີ້ແມ່ນຂໍ້ຈໍາກັດຂອງວິທີການ CSS ຈັດການກັບການເຄື່ອນໄຫວຫຼາຍອັນຢູ່ໃນຄຸນສົມບັດດຽວກັນ. ຕົວຢ່າງ, ອັນນີ້ຈະບໍ່ເຮັດວຽກຕາມທີ່ຕັ້ງໃຈໄວ້ ເພາະວ່າມີພຽງອະນິເມຊັນ kf-pulse ເທົ່ານັ້ນທີ່ຈະນຳໃຊ້. .bad-combo { ພາບເຄື່ອນໄຫວ: kf-zoom 0.5s ໄປຂ້າງຫນ້າ, kf-pulse 1.2s infinite alternate; --kf-zoom-from: 0.5; --kf-zoom-to: 1.2; --kf-pulse-scale-ຈາກ: 0.8; --kf-pulse-scale-to: 1.1; }
ການເພີ່ມອະນິເມຊັນ ວິທີທີ່ງ່າຍທີ່ສຸດ ແລະກົງໄປກົງມາທີ່ສຸດໃນການຈັດການອະນິເມຊັນຫຼາຍຮູບທີ່ສົ່ງຜົນກະທົບຕໍ່ຊັບສິນດຽວກັນແມ່ນການໃຊ້ຄຸນສົມບັດການປະກອບພາບເຄື່ອນໄຫວ. ໃນຕົວຢ່າງສຸດທ້າຍຂ້າງເທິງ, ການເຄື່ອນໄຫວ kf-pulse ຈະປ່ຽນແທນອະນິເມຊັນ kf-zoom, ດັ່ງນັ້ນພວກເຮົາຈະບໍ່ເຫັນການຊູມເບື້ອງຕົ້ນ ແລະຈະບໍ່ໄດ້ຮັບຂະຫນາດທີ່ຄາດວ່າຈະເປັນ 1.2. ໂດຍການຕັ້ງຄ່າ animation-composition ເພື່ອເພີ່ມ, ພວກເຮົາບອກຕົວທ່ອງເວັບໃຫ້ປະສົມປະສານທັງສອງພາບເຄື່ອນໄຫວ. ນີ້ເຮັດໃຫ້ພວກເຮົາຜົນໄດ້ຮັບທີ່ພວກເຮົາຕ້ອງການ. .ສ່ວນປະກອບ-ສອງ { animation-composition: ເພີ່ມ; }
ເບິ່ງ Pen Keyframes Tokens - Demo 8 [forked] ໂດຍ Amit Sheen. ວິທີການນີ້ເຮັດວຽກໄດ້ດີສໍາລັບກໍລະນີສ່ວນໃຫຍ່ທີ່ພວກເຮົາຕ້ອງການທີ່ຈະສົມທົບຜົນກະທົບໃນຊັບສິນດຽວກັນ. ມັນຍັງເປັນປະໂຫຍດເມື່ອພວກເຮົາຕ້ອງການລວມພາບເຄື່ອນໄຫວທີ່ມີຄ່າຊັບສິນຄົງທີ່. ຕົວຢ່າງ: ຖ້າພວກເຮົາມີອົງປະກອບທີ່ນໍາໃຊ້ຄຸນສົມບັດການແປເພື່ອຈັດວາງມັນຢູ່ບ່ອນທີ່ພວກເຮົາຕ້ອງການ, ແລະຫຼັງຈາກນັ້ນພວກເຮົາຕ້ອງການໃຫ້ມັນເຄື່ອນໄຫວດ້ວຍຄີເຟຣມ kf-slide-in, ພວກເຮົາຈະໄດ້ຮັບການກະໂດດທີ່ເຫັນໄດ້ຊັດເຈນໂດຍບໍ່ມີອົງປະກອບພາບເຄື່ອນໄຫວ. ເບິ່ງ Pen Keyframes Tokens - Demo 9 [forked] ໂດຍ Amit Sheen. ດ້ວຍການຕັ້ງອົງປະກອບອະນິເມຊັນເພື່ອເພີ່ມ, ອະນິເມຊັນຈະຖືກລວມເຂົ້າກັບສິ່ງທີ່ມີຢູ່ແລ້ວການປ່ຽນແປງ, ດັ່ງນັ້ນອົງປະກອບຈະຢູ່ໃນສະຖານທີ່ແລະເຄື່ອນໄຫວຕາມທີ່ຄາດໄວ້. Animation Stagger ອີກວິທີໜຶ່ງໃນການຈັດການອະນິເມຊັນຫຼາຍອັນຄືການ “ຢຸດສະງັກ” ພວກມັນ — ນັ້ນແມ່ນ, ເລີ່ມຕົ້ນພາບເຄື່ອນໄຫວທີສອງເລັກນ້ອຍຫຼັງຈາກອັນທຳອິດເຮັດແລ້ວ. ມັນບໍ່ແມ່ນການແກ້ໄຂທີ່ໃຊ້ໄດ້ກັບທຸກໆກໍລະນີ, ແຕ່ມັນເປັນປະໂຫຍດເມື່ອພວກເຮົາມີພາບເຄື່ອນໄຫວທາງເຂົ້າທີ່ຕິດຕາມດ້ວຍພາບເຄື່ອນໄຫວຢ່າງຕໍ່ເນື່ອງ. /* ຈາງລົງ + ກຳມະຈອນຄວາມມືດ */ .ການແຈ້ງເຕືອນ { ພາບເຄື່ອນໄຫວ: kf-fade-in 2s ງ່າຍອອກ, kf-pulse 0.5s 2s ease-in-out infinite alternate; --kf-pulse-opacity-ເຖິງ: 0.5; }
ເບິ່ງ Pen Keyframes Tokens - Demo 10 [forked] ໂດຍ Amit Sheen. ຄໍາສັ່ງເລື່ອງ ສ່ວນໃຫຍ່ຂອງອະນິເມຊັນທີ່ພວກເຮົາເຮັດວຽກກັບການນໍາໃຊ້ຄຸນສົມບັດການຫັນປ່ຽນ. ໃນກໍລະນີຫຼາຍທີ່ສຸດ, ນີ້ແມ່ນສະດວກກວ່າ. ມັນຍັງມີປະໂຫຍດດ້ານການປະຕິບັດຍ້ອນວ່າການຫັນປ່ຽນພາບເຄື່ອນໄຫວສາມາດເລັ່ງ GPU ໄດ້. ແຕ່ຖ້າພວກເຮົາໃຊ້ການຫັນປ່ຽນ, ພວກເຮົາຈໍາເປັນຕ້ອງຍອມຮັບວ່າຄໍາສັ່ງທີ່ພວກເຮົາປະຕິບັດການຫັນປ່ຽນແມ່ນສໍາຄັນ. ຫຼາຍ. ໃນຄີເຟຣມຂອງພວກເຮົາມາເຖິງຕອນນັ້ນ, ພວກເຮົາໄດ້ໃຊ້ການຫັນເປັນສ່ວນບຸກຄົນ. ອີງຕາມຂໍ້ມູນຈໍາເພາະ, ສິ່ງເຫຼົ່ານີ້ຖືກໃຊ້ຢູ່ໃນລໍາດັບຄົງທີ່: ທໍາອິດ, ອົງປະກອບໄດ້ຮັບການແປ, ຫຼັງຈາກນັ້ນຫມຸນ, ຫຼັງຈາກນັ້ນຂະຫນາດ. ນີ້ເຮັດໃຫ້ຄວາມຮູ້ສຶກແລະເປັນສິ່ງທີ່ພວກເຮົາສ່ວນໃຫຍ່ຄາດຫວັງ. ຢ່າງໃດກໍຕາມ, ຖ້າພວກເຮົາໃຊ້ຄຸນສົມບັດການຫັນປ່ຽນ, ຄໍາສັ່ງໃນຫນ້າທີ່ຖືກຂຽນແມ່ນຄໍາສັ່ງທີ່ຖືກນໍາໃຊ້. ໃນກໍລະນີນີ້, ຖ້າຫາກວ່າພວກເຮົາຍ້າຍບາງສິ່ງບາງຢ່າງ 100 pixels ສຸດແກນ X ແລະຫຼັງຈາກນັ້ນການຫມຸນໂດຍ 45 ອົງສາ, ມັນບໍ່ຄືກັນກັບຄັ້ງທໍາອິດທີ່ຫມຸນມັນໂດຍ 45 ອົງສາແລະຫຼັງຈາກນັ້ນຍ້າຍມັນ 100 pixels. /* ສີ່ຫຼ່ຽມສີບົວ: ທໍາອິດແປ, ຫຼັງຈາກນັ້ນ rotate */ .ຕົວຢ່າງ-ໜຶ່ງ { transform: translateX(100px) rotate(45deg); }
/* ສີ່ຫຼ່ຽມສີຂຽວ: ທໍາອິດຫມຸນ, ຫຼັງຈາກນັ້ນແປ */ .ຕົວຢ່າງ-ສອງ { transform: rotate(45deg) translateX(100px); }
ເບິ່ງ Pen Keyframes Tokens - Demo 11 [forked] ໂດຍ Amit Sheen. ແຕ່ອີງຕາມຄໍາສັ່ງການຫັນປ່ຽນ, ທຸກການຫັນປ່ຽນສ່ວນບຸກຄົນ - ທຸກສິ່ງທຸກຢ່າງທີ່ພວກເຮົາໄດ້ນໍາໃຊ້ສໍາລັບ keyframes tokens - ເກີດຂຶ້ນກ່ອນທີ່ຈະປະຕິບັດຫນ້າທີ່ການຫັນປ່ຽນ. ນັ້ນ ໝາຍ ຄວາມວ່າສິ່ງໃດທີ່ທ່ານຕັ້ງໄວ້ໃນຊັບສິນການຫັນປ່ຽນຈະເກີດຂື້ນຫຼັງຈາກພາບເຄື່ອນໄຫວ. ແຕ່ຖ້າທ່ານຕັ້ງ, ສໍາລັບການຍົກຕົວຢ່າງ, ການແປພາສາຮ່ວມກັນກັບ keyframes kf-spin, ການແປພາສາຈະເກີດຂຶ້ນກ່ອນທີ່ຈະມີການເຄື່ອນໄຫວ. ສັບສົນບໍ?! ນີ້ນໍາໄປສູ່ສະຖານະການທີ່ຄ່າຄົງທີ່ສາມາດເຮັດໃຫ້ຜົນໄດ້ຮັບທີ່ແຕກຕ່າງກັນສໍາລັບການເຄື່ອນໄຫວດຽວກັນ, ເຊັ່ນໃນກໍລະນີຕໍ່ໄປນີ້:
/* ພາບເຄື່ອນໄຫວທົ່ວໄປສໍາລັບທັງສອງ spinners */ . spinner { ການເຄື່ອນໄຫວ: kf-spin 1s linear infinite; }
/* Pink spinner: ແປວ່າກ່ອນ rotate (ການຫັນເປັນສ່ວນບຸກຄົນ) */ . spinner-ສີບົວ { ແປ: 100% 50%; }
/* Green spinner: rotate then translation (function order) */ . spinner-green { ການຫັນປ່ຽນ: ແປພາສາ(100%, 50%); }
ເບິ່ງ Pen Keyframes Tokens - Demo 12 [forked] ໂດຍ Amit Sheen. ທ່ານສາມາດເຫັນໄດ້ວ່າ spinner ທໍາອິດ (ສີບົວ) ໄດ້ຮັບການແປທີ່ເກີດຂື້ນກ່ອນທີ່ຈະຫມຸນຂອງ kf-spin, ດັ່ງນັ້ນມັນທໍາອິດຍ້າຍໄປບ່ອນຂອງມັນແລະຫຼັງຈາກນັ້ນ spin. spinner ທີສອງ (ສີຂຽວ) ໄດ້ຮັບຫນ້າທີ່ແປ () ທີ່ເກີດຂຶ້ນຫຼັງຈາກການຫັນເປັນບຸກຄົນ, ດັ່ງນັ້ນອົງປະກອບທໍາອິດ spinner, ຫຼັງຈາກນັ້ນຍ້າຍກັບມຸມປະຈຸບັນຂອງມັນ, ແລະພວກເຮົາໄດ້ຮັບຜົນກະທົບວົງໂຄຈອນກວ້າງນັ້ນ. ບໍ່, ນີ້ບໍ່ແມ່ນແມງໄມ້. ມັນເປັນພຽງແຕ່ຫນຶ່ງໃນສິ່ງທີ່ພວກເຮົາຈໍາເປັນຕ້ອງຮູ້ກ່ຽວກັບ CSS ແລະຈື່ໄວ້ໃນເວລາທີ່ເຮັດວຽກກັບອະນິເມຊັນຫຼາຍຫຼືການຫັນປ່ຽນຫຼາຍ. ຖ້າຈໍາເປັນ, ທ່ານຍັງສາມາດສ້າງຊຸດເພີ່ມເຕີມຂອງຄີເຟຣມ kf-spin-alt ທີ່ rotate ອົງປະກອບໂດຍໃຊ້ຟັງຊັນ rotate() ໄດ້. ການເຄື່ອນໄຫວຫຼຸດລົງ ແລະໃນຂະນະທີ່ພວກເຮົາເວົ້າກ່ຽວກັບຄີເຟຣມທາງເລືອກ, ພວກເຮົາບໍ່ສາມາດບໍ່ສົນໃຈທາງເລືອກ "ບໍ່ມີພາບເຄື່ອນໄຫວ". ຫນຶ່ງໃນຂໍ້ໄດ້ປຽບທີ່ໃຫຍ່ທີ່ສຸດຂອງການໃຊ້ keyframes tokens ແມ່ນວ່າການເຂົ້າເຖິງສາມາດຖືກອົບໃນ, ແລະຕົວຈິງແລ້ວມັນແມ່ນຂ້ອນຂ້າງງ່າຍທີ່ຈະເຮັດ. ໂດຍການອອກແບບຄີເຟຣມຂອງພວກເຮົາດ້ວຍການເຂົ້າໃຊ້ໃນໃຈ, ພວກເຮົາສາມາດຮັບປະກັນວ່າຜູ້ໃຊ້ທີ່ມັກການເຄື່ອນໄຫວທີ່ຫຼຸດລົງຈະໄດ້ຮັບປະສົບການທີ່ລຽບງ່າຍ, ລົບກວນໜ້ອຍລົງ, ໂດຍບໍ່ມີການເຮັດວຽກເພີ່ມເຕີມ ຫຼືລະຫັດຊໍ້າກັນ. ຄວາມຫມາຍທີ່ແນ່ນອນຂອງ "ການເຄື່ອນໄຫວທີ່ຫຼຸດລົງ" ສາມາດປ່ຽນເລັກນ້ອຍຈາກພາບເຄື່ອນໄຫວຫນຶ່ງໄປຫາອີກ, ແລະຈາກໂຄງການໄປຫາໂຄງການ, ແຕ່ນີ້ແມ່ນບາງຈຸດສໍາຄັນທີ່ຄວນຈື່: ກຳລັງປິດສຽງຄີເຟຣມ ໃນຂະນະທີ່ບາງອະນິເມຊັນສາມາດອ່ອນລົງ ຫຼືຊ້າລົງ, ມີບາງອັນທີ່ຄວນຈະຫາຍໄປໝົດເມື່ອມີການຮ້ອງຂໍການເຄື່ອນໄຫວທີ່ຫຼຸດລົງ. ພາບເຄື່ອນໄຫວຂອງກໍາມະຈອນເປັນຕົວຢ່າງທີ່ດີ. ເພື່ອໃຫ້ແນ່ໃຈວ່າອະນິເມຊັນເຫຼົ່ານີ້ບໍ່ເຮັດວຽກຢູ່ໃນໂໝດການເຄື່ອນໄຫວທີ່ຫຼຸດລົງ, ພວກເຮົາພຽງແຕ່ສາມາດຫໍ່ພວກມັນໄວ້ໃນແບບສອບຖາມສື່ທີ່ເໝາະສົມ.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { ຈາກ { scale: var(--kf-pulse-scale-from, 1); opacity: var(--kf-pulse-opacity-from, 1); } ເຖິງ { scale: var(--kf-pulse-scale-to, 1); ຄວາມໂປ່ງໃສ:var(--kf-pulse-opacity-to, 1); } } }
ອັນນີ້ຮັບປະກັນວ່າຜູ້ໃຊ້ທີ່ຕັ້ງຄວາມມັກ-ຫຼຸດ-ການເຄື່ອນໄຫວເພື່ອຫຼຸດຈະບໍ່ເຫັນພາບເຄື່ອນໄຫວ ແລະຈະໄດ້ຮັບປະສົບການທີ່ກົງກັບຄວາມມັກຂອງເຂົາເຈົ້າ. Instant In ມີບາງຄີເຟຣມທີ່ພວກເຮົາບໍ່ສາມາດເອົາອອກໄດ້, ເຊັ່ນວ່າອະນິເມຊັນທາງເຂົ້າ. ມູນຄ່າຕ້ອງປ່ຽນແປງ, ຕ້ອງເຄື່ອນໄຫວ; ຖ້າບໍ່ດັ່ງນັ້ນ, ອົງປະກອບຈະບໍ່ມີຄ່າທີ່ຖືກຕ້ອງ. ແຕ່ໃນການເຄື່ອນໄຫວທີ່ຫຼຸດລົງ, ການປ່ຽນແປງນີ້ຈາກມູນຄ່າເບື້ອງຕົ້ນຄວນຈະເປັນທັນທີ. ເພື່ອບັນລຸສິ່ງດັ່ງກ່າວ, ພວກເຮົາຈະກໍານົດຊຸດຄີເຟຣມເພີ່ມເຕີມທີ່ຄ່າຈະໂດດໄປຫາສະຖານະສຸດທ້າຍ. ສິ່ງເຫຼົ່ານີ້ກາຍເປັນຄີເຟຣມເລີ່ມຕົ້ນຂອງພວກເຮົາ. ຈາກນັ້ນ, ພວກເຮົາຈະເພີ່ມຄີເຟຣມປົກກະຕິພາຍໃນການສອບຖາມສື່ສໍາລັບການເລືອກ-ຫຼຸດ-ການເຄື່ອນໄຫວທີ່ຕັ້ງເປັນບໍ່ມັກ, ຄືກັນກັບໃນຕົວຢ່າງທີ່ຜ່ານມາ. /* ປາກົດໃນທັນທີສໍາລັບການຫຼຸດຜ່ອນການເຄື່ອນໄຫວ */ @keyframes kf-zoom { ຈາກ, ເຖິງ { ຂະຫນາດ: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* ຄີເຟຣມຊູມຕົ້ນສະບັບ */ @keyframes kf-zoom { ຈາກ { ຂະຫນາດ: var(--kf-zoom-from, 0.8); } ເຖິງ { ຂະຫນາດ: var(--kf-zoom-to, 1); } } }
ດ້ວຍວິທີນີ້, ຜູ້ໃຊ້ທີ່ມັກການເຄື່ອນໄຫວທີ່ຫຼຸດລົງຈະເຫັນອົງປະກອບປະກົດຂຶ້ນທັນທີໃນສະຖານະສຸດທ້າຍຂອງມັນ, ໃນຂະນະທີ່ທຸກຄົນໄດ້ຮັບການປ່ຽນເຄື່ອນໄຫວ. ວິທີການອ່ອນ ມີບາງກໍລະນີທີ່ພວກເຮົາຕ້ອງການທີ່ຈະຮັກສາການເຄື່ອນໄຫວບາງຢ່າງ, ແຕ່ຫຼາຍ softer ແລະ calmer ກວ່າອະນິເມຊັນຕົ້ນສະບັບ. ສໍາລັບຕົວຢ່າງ, ພວກເຮົາສາມາດທົດແທນການເສັງເຂົ້າ bounce ກັບ fade-in ອ່ອນໂຍນ.
@keyframes kf-bounce { /* ອ່ອນເພຍລົງເພື່ອຫຼຸດການເຄື່ອນໄຫວ */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* ຄີເຟຣມ bounce ຕົ້ນສະບັບ */ } }
ໃນປັດຈຸບັນ, ຜູ້ໃຊ້ທີ່ມີການເປີດໃຊ້ການເຄື່ອນໄຫວທີ່ຫຼຸດລົງຍັງໄດ້ຮັບຄວາມຮູ້ສຶກຂອງຮູບລັກສະນະ, ແຕ່ບໍ່ມີການເຄື່ອນໄຫວທີ່ຮຸນແຮງຂອງ bounce ຫຼືການເຄື່ອນໄຫວ elastic. ດ້ວຍຕຶກອາຄານຢູ່ໃນສະຖານທີ່, ຄໍາຖາມຕໍ່ໄປແມ່ນວິທີການເຮັດໃຫ້ພວກມັນເປັນສ່ວນຫນຶ່ງຂອງຂະບວນການເຮັດວຽກຕົວຈິງ. ການຂຽນຄີເຟຣມທີ່ມີຄວາມຍືດຫຍຸ່ນແມ່ນສິ່ງຫນຶ່ງ, ແຕ່ການເຮັດໃຫ້ພວກເຂົາມີຄວາມຫນ້າເຊື່ອຖືໃນທົ່ວໂຄງການຂະຫນາດໃຫຍ່ຮຽກຮ້ອງໃຫ້ມີກົນລະຍຸດຈໍານວນຫນ້ອຍທີ່ຂ້ອຍຕ້ອງຮຽນຮູ້ວິທີທີ່ຍາກ. ຍຸດທະສາດການຈັດຕັ້ງປະຕິບັດ & ການປະຕິບັດທີ່ດີທີ່ສຸດ ເມື່ອພວກເຮົາມີຫ້ອງສະຫມຸດຂອງ keyframes tokens ແຂງ, ສິ່ງທ້າທາຍທີ່ແທ້ຈິງແມ່ນວິທີການນໍາເອົາພວກມັນເຂົ້າໄປໃນວຽກປະຈໍາວັນ.
ການລໍ້ລວງແມ່ນເພື່ອລຸດລົງ keyframes ທັງຫມົດໃນເວລາດຽວແລະປະກາດບັນຫາທີ່ຖືກແກ້ໄຂ, ແຕ່ໃນການປະຕິບັດຂ້ອຍພົບວ່າຜົນໄດ້ຮັບທີ່ດີທີ່ສຸດແມ່ນມາຈາກການຮັບຮອງເອົາເທື່ອລະກ້າວ. ເລີ່ມຕົ້ນດ້ວຍພາບເຄື່ອນໄຫວທົ່ວໄປທີ່ສຸດ, ເຊັ່ນ: ຈາງລົງຫຼືສະໄລ້. ເຫຼົ່ານີ້ແມ່ນການຊະນະທີ່ງ່າຍດາຍທີ່ສະແດງໃຫ້ເຫັນມູນຄ່າທັນທີໂດຍບໍ່ມີການຮຽກຮ້ອງໃຫ້ມີການຂຽນຄືນໃຫມ່ໃຫຍ່. ການຕັ້ງຊື່ແມ່ນອີກຈຸດຫນຶ່ງທີ່ສົມຄວນໄດ້ຮັບຄວາມສົນໃຈ. ຄໍານໍາຫນ້າຫຼື namespace ທີ່ສອດຄ່ອງເຮັດໃຫ້ມັນຊັດເຈນວ່າອະນິເມຊັນໃດເປັນ tokens ແລະອັນໃດເປັນຈຸດດຽວໃນທ້ອງຖິ່ນ. ມັນຍັງປ້ອງກັນການປະທະກັນໂດຍບັງເອີນ ແລະຊ່ວຍໃຫ້ສະມາຊິກທີມໃໝ່ຮັບຮູ້ລະບົບທີ່ໃຊ້ຮ່ວມກັນໄດ້ທັນທີ. ເອກະສານແມ່ນມີຄວາມສໍາຄັນຄືກັນກັບລະຫັດຕົວມັນເອງ. ເຖິງແມ່ນວ່າຄໍາເຫັນສັ້ນໆຂ້າງເທິງແຕ່ລະ keyframes token ສາມາດປະຫຍັດເວລາການຄາດເດົາຕໍ່ມາ. ນັກພັດທະນາຄວນຈະສາມາດເປີດໄຟລ໌ tokens, ສະແກນຜົນກະທົບທີ່ເຂົາເຈົ້າຕ້ອງການ, ແລະຄັດລອກຮູບແບບການນໍາໃຊ້ໂດຍກົງໃສ່ອົງປະກອບຂອງເຂົາເຈົ້າ. ຄວາມຍືດຫຍຸ່ນແມ່ນສິ່ງທີ່ເຮັດໃຫ້ວິທີການນີ້ມີມູນຄ່າຄວາມພະຍາຍາມ. ໂດຍການເປີດເຜີຍຄຸນສົມບັດແບບກຳນົດເອງທີ່ເຂົ້າໃຈໄດ້, ພວກເຮົາໃຫ້ບ່ອນຫວ່າງຂອງທີມເພື່ອປັບຕົວອະນິເມຊັນໂດຍບໍ່ທຳລາຍລະບົບ. ໃນເວລາດຽວກັນ, ພະຍາຍາມບໍ່ໃຫ້ overcomplicate. ໃຫ້ລູກບິດທີ່ມີຄວາມສໍາຄັນແລະຮັກສາຄວາມຄິດເຫັນສ່ວນທີ່ເຫຼືອ. ສຸດທ້າຍ, ຈື່ຈໍາການເຂົ້າເຖິງ. ບໍ່ແມ່ນທຸກໆອະນິເມຊັນຕ້ອງການທາງເລືອກການເຄື່ອນໄຫວທີ່ຫຼຸດລົງ, ແຕ່ຫຼາຍຄົນເຮັດ. Baking ໃນການປັບເຫຼົ່ານີ້ໃນຕອນຕົ້ນຫມາຍຄວາມວ່າພວກເຮົາບໍ່ຈໍາເປັນຕ້ອງ retrofit ໃຫ້ເຂົາເຈົ້າຕໍ່ມາ, ແລະມັນສະແດງໃຫ້ເຫັນລະດັບຂອງການດູແລທີ່ຜູ້ໃຊ້ຂອງພວກເຮົາຈະສັງເກດເຫັນເຖິງແມ່ນວ່າພວກເຂົາເຈົ້າບໍ່ເຄີຍກ່າວເຖິງມັນ.
ໃນປະສົບການຂອງຂ້ອຍ, ການປິ່ນປົວ keyframes tokens ເປັນສ່ວນຫນຶ່ງຂອງຂະບວນການອອກແບບ tokens ຂອງພວກເຮົາແມ່ນສິ່ງທີ່ເຮັດໃຫ້ພວກມັນຕິດ. ເມື່ອພວກເຂົາຢູ່ໃນສະຖານທີ່, ພວກເຂົາຢຸດຄວາມຮູ້ສຶກຄືກັບຜົນກະທົບພິເສດແລະເປັນສ່ວນຫນຶ່ງຂອງພາສາການອອກແບບ, ການຂະຫຍາຍທໍາມະຊາດຂອງວິທີການທີ່ຜະລິດຕະພັນຍ້າຍແລະຕອບສະຫນອງ. ຫໍ່ຂຶ້ນ ພາບເຄື່ອນໄຫວສາມາດເປັນສ່ວນຫນຶ່ງທີ່ມີຄວາມສຸກທີ່ສຸດຂອງການໂຕ້ຕອບການກໍ່ສ້າງ, ແຕ່ບໍ່ມີໂຄງສ້າງ, ພວກມັນຍັງສາມາດກາຍເປັນຫນຶ່ງໃນແຫຼ່ງຄວາມອຸກອັ່ງທີ່ໃຫຍ່ທີ່ສຸດ. ໂດຍການປິ່ນປົວຄີເຟຣມເປັນໂທເຄັນ, ທ່ານເອົາບາງສິ່ງບາງຢ່າງທີ່ປົກກະຕິສັບສົນ ແລະຍາກທີ່ຈະຈັດການ ແລະປ່ຽນມັນໃຫ້ເປັນລະບົບທີ່ຊັດເຈນ, ຄາດເດົາໄດ້. ມູນຄ່າທີ່ແທ້ຈິງແມ່ນບໍ່ພຽງແຕ່ໃນການບັນທຶກສອງສາມເສັ້ນຂອງລະຫັດ. ມັນມີຄວາມໝັ້ນໃຈວ່າເມື່ອທ່ານໃຊ້ເຄື່ອງປັ່ນປ່ວນ, ສະໄລ້, ຊູມ, ຫຼືສະປິນ, ທ່ານຮູ້ຢ່າງແນ່ນອນວ່າມັນຈະປະຕິບັດຕົວແນວໃດໃນທົ່ວໂຄງການ. ມັນແມ່ນຢູ່ໃນຄວາມຍືດຫຍຸ່ນທີ່ມາຈາກຄຸນສົມບັດທີ່ກໍາຫນົດເອງໂດຍບໍ່ມີຄວາມວຸ່ນວາຍຂອງການປ່ຽນແປງທີ່ບໍ່ມີທີ່ສິ້ນສຸດ. ແລະມັນຢູ່ໃນການເຂົ້າເຖິງການກໍ່ສ້າງເຂົ້າໄປໃນພື້ນຖານແທນທີ່ຈະເພີ່ມເປັນຄວາມຄຶດຫລັງ. ຂ້າພະເຈົ້າໄດ້ເຫັນແນວຄວາມຄິດເຫຼົ່ານີ້ເຮັດວຽກຢູ່ໃນທີມທີ່ແຕກຕ່າງກັນແລະລະຫັດລະຫັດທີ່ແຕກຕ່າງກັນ, ແລະຮູບແບບແມ່ນສະເຫມີຄືກັນ. ເມື່ອ tokens ຢູ່ໃນສະຖານທີ່, keyframes ຢຸດເຊົາການເປັນການເກັບກໍາ tricks ກະແຈກກະຈາຍແລະກາຍເປັນສ່ວນຫນຶ່ງຂອງພາສາອອກແບບ. ພວກເຂົາເຮັດໃຫ້ຜະລິດຕະພັນມີຄວາມຮູ້ສຶກມີຄວາມຕັ້ງໃຈ, ສອດຄ່ອງຫຼາຍ, ແລະມີຊີວິດຊີວາຫຼາຍຂຶ້ນ. ຖ້າທ່ານເອົາສິ່ງຫນຶ່ງຈາກບົດຄວາມນີ້, ໃຫ້ມັນເປັນນີ້: ພາບເຄື່ອນໄຫວສົມຄວນໄດ້ຮັບການດູແລແລະໂຄງສ້າງດຽວກັນທີ່ພວກເຮົາໃຫ້ສີ, typography, ແລະໄລຍະຫ່າງ. ການລົງທຶນເລັກນ້ອຍໃນ keyframes tokens ຈ່າຍອອກທຸກຄັ້ງທີ່ການໂຕ້ຕອບຂອງທ່ານຍ້າຍ.
