ລະບົບ CSS @keyframes
- ຫນ້າວຍັງ justify-self
- ຄືນບ່ອນ @layer
ການກໍານົດ ແລະ ການນໍາໃຊ້
ຜ່ານ @keyframes ຂັ້ນຕອນ ທ່ານສາມາດສ້າງຄະຕິນິຍົມ.
ຄວາມພື້ນຖານການສ້າງຄະຕິນິຍົມແມ່ນ ການປ່ຽນແປງຄະຕິນິຍົມຄັ້ງທີ່ຫນັງຫລາຍເປັນຄະຕິນິຍົມອີກຄັ້ງ.
ໃນຂະບວນການຄະຕິນິຍົມ ທ່ານສາມາດປ່ຽນແປງຄະຕິນິຍົມຄັ້ງຫຼາຍຄັ້ງ.
ນັກວັດຖຸສຳລັບການຕັ້ງການການປ່ຽນແປງຄະຕິນິຍົມ ຫລື ຜ່ານຄຳສັບ "from" ແລະ "to" ເຊິ່ງບໍ່ຮັບຜິດກົດຫມາຍ 0% ແລະ 100%.
0% ແມ່ນເວລາການເລີ່ມການຄະຕິນິຍົມ 100% ແມ່ນເວລາສິ້ນສຸດການຄະຕິນິຍົມ.
ຄຳແນະນຳ：ເພື່ອການສະໜັບສະໜຸນຄະຕິນິຍົມສຳລັບການເບິ່ງຫາຫລັງຈາກນີ້ທີ່ດີທີ່ສຸດ ທ່ານຄວນຕົກຮູບ 0% ແລະ 100%.
ຄຳແນະນຳ：ກະລຸນານັກການດັດແນວຄະຕິນິຍົມຂອງການຍິ່ງສະແດງຄະຕິນິຍົມ ແລະ ຕິດຕໍ່ກັບຄູ່ເລືອກນີ້.
ເຫັນວ່າ：!important ຂັ້ນຕອນຈະຖືກລົບລ້າງໃນການຕັ້ງການກະດາດ (ບໍ່ຊອກຫາຫລັງຈາກນີ້ຫຼັງຈາກນັ້ນ).
ບໍ່ຊອກຫາຫລັງຈາກນີ້：
CSS3 ການສອນ：CSS3 动画
ຄວາມຄົງຫນັງ
例子 1
ເຮັດໃຫ້ຫຼັກ div ປ່ຽນຕົວຕົວລົງຢ່າງຄົງຄວາມສະເຫນີຢ່າງທົດສະນະນັ້ນ：
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
ຕົວຢ່າງ 2
ການເພີ່ມຄັນສັບ keyframe ຫຼາຍຄັນໃນການຢັ້ງຢືນຢັນດຽວກັນ：
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
ຕົວຢ່າງ 3
ການປ່ຽນແປງບັນດາສັນຍາລະບົບ CSS ໃນການຢັ້ງຢືນຢັນດຽວກັນ：
@keyframes mymove {
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
ຕົວຢ່າງ 4
ຄູ່ມູນການເລືອກຄັນສັບ keyframe ທີ່ມີບັນດາສັນຍາລະບົບ CSS：
@keyframes mymove {
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
ຕົວຢ່າງ 5
ເຫັນວ່າ：!important ບັນດາກົດລະບຽບຖືກທຳລາຍໃນການພິຈາລະນາຄັນຫຼັງການກຳນົດຄັນສັບການຢັ້ງຢືນຢັນ：
@keyframes myexample {
from {top: 0px;}
50% {top: 100px !important;} /* ຖືກທຳລາຍ */
to {top: 200px;}
}
ການນຳໃຊ້ພາສາ CSS
@keyframes animationname {keyframes-selector {css-styles;}}
ຄູ່ມູນຂອງບັນດາສັນຍາລະບົບ
| ຄູ່ມູນ | ສະຫລຸບ |
|---|---|
| animationname | ຄວາມຈຳເປັນ。ກຳນົດຊື່ຂອງການຢັ້ງຢືນຢັນ。 |
| keyframes-selector |
ຄວາມຈຳເປັນ。ສິບຕາການການຕັ້ງການຢັ້ງຢືນຢັນຂອງອັນດັບພາກສ່ວນຂອງການຕັ້ງການ。 ຄູ່ມູນທີ່ຖືກກວດສອບ
|
| css-styles | ຄວາມຈຳເປັນ。ຄືນຫຼືຫຼາຍຄືນຂອງບັນດາບັນດາບາງບັນດາສັນຍາລະບົບ CSS。 |
ການສະໜັບສະໜູນບັນຊີວະບາງ
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
- ຫນ້າວຍັງ justify-self
- ຄືນບ່ອນ @layer
