CSS ການສະແດງການສະແດງ

CSS ການສະແດງການສະແດງ

CSS ສາມາດສ້າງ animation effect HTML element ບໍ່ຕ້ອງນຳໃຊ້ JavaScript ຫລື Flash!

CSS

ໃນວັນນີ້, ທ່ານຈະຮຽນ ກ່ຽວກັບ property ທີ່ພື່ງຄືນ:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Browser support for animation

ຈຳນວນໃນຕາລະບັນຍັດຈະສະແດງ browser ທຳມະດາທີ່ເປັນຄັນທຳອິດໃຫ້ເປັນ property.

ຂອງ Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

ວ່າແມ່ນຫຍັງ CSS animation?

Animation ຈະປ່ຽນມີ style element ຈາກ style ໜຶ່ງຫາ style ອື່ນ.

ທ່ານສາມາດປ່ຽນມີລັກສະນະ CSS ອັນດຽວຫລາຍອັນຫາຫວັງ.

ສຳລັບການນຳໃຊ້ CSS animation, ທ່ານຕ້ອງກຳນົດ keyframes ສຳລັບ animation.

Keyframes ບັນທຶກ style ທີ່ element ມີໃນເວລາພິເສດ.

@keyframes rule

ຖ້າທ່ານໃຊ້: @keyframes ຕາມ rule ທີ່ກໍານົດ CSS style, animation ຈະປ່ຽນມີລັກສະນະຈາກ style ທຳໃຫຍ່ຫາ style ອື່ນໃນເວລາພິເສດ.

ເພື່ອສາມາດຈະມີ animation, ທ່ານຕ້ອງມີ animation ກັບ element.

ບົດຢ່າງທີ່ພື່ງຄືນຈະປ່ຽນ "example" animation ກັບ <div> element. Animation ຈະຄົງຄືນ 4ວັນ, ແລະ ປ່ຽນມີລັກສະນະ background color <div> element ຈາກ "red" ໄປ "yellow":

ຄວາມຈຳນວນ

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* ການຂຽນການຫລິ້ງການປ່ຽນມີລັກສະນະໃຫ້ກັບບັນທັດນີ້ */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

ຊອກບຸກຄົນມື້ນີ້

ຫັງວິນ:animation-duration ຜົນງານຈະປະກອບຕົວຢ່າງຫລາຍອັນຫາຫວັງການຫລິ້ງການປ່ຽນມີລັກສະນະ. animation-duration ຜົນງານຈະບໍ່ມີການຫລິ້ງການປ່ຽນມີລັກສະນະ, ຍ້ອນຄຳສັບມີຄວາມພົບໄດ້ເປັນ 0s (0ວັນ).

ໃນບົດຢ່າງທີ່ກ່າວຂື້ນມາ, ຜ່ານການນຳໃຊ້ຄຳສັບ "from" ແລະ "to" (ສະແດງ 0% (ຕົ້ນ) ແລະ 100% (ຈົບ)) ພວກເຮົາໄດ້ກຳນົດມີລັກສະນະເມື່ອຈະປ່ຽນ.

ທ່ານສາມາດນຳໃຊ້ຄວາມສະເພາະ. ຜ່ານການນຳໃຊ້ຄວາມສະເພາະ, ທ່ານສາມາດເພີ່ມການປ່ຽນມີລັກສະນະຫລາຍອັນຫາຫວັງ.

ບົດຢ່າງທີ່ພື່ງຄືນຈະປ່ຽນມີມີລັກສະນະວັດຈຳນວນ 25%ຈະສຳເລັດການຫລິ້ງການປ່ຽນມີລັກສະນະ <div> element:

ຄວາມຈຳນວນ

/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

ຊອກບຸກຄົນມື້ນີ້

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改背景颜色和

元素的位置：

ຄວາມຈຳນວນ

/* 动画代码 */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

ຊອກບຸກຄົນມື້ນີ້

延迟动画

animation-delay 属性规定动画开始的延迟时间。

ບົດສະຫຼຸບນີ້ໃຊ້ຄູ່ມູນ 2 ວິນາທີ ກ່ອນຈະເລີ່ມສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາ:

ຄວາມຈຳນວນ

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

ຊອກບຸກຄົນມື້ນີ້

ຄູ່ມູນທີ່ບໍ່ພົບສາມາດຈະອະນຸຍາດ. ຖ້າໃຊ້ຄູ່ມູນທີ່ບໍ່ພົບສາມາດ, ການສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາຕອນທີ່ຈະເລີ່ມສະແດງ, ຄືວ່າໄດ້ສະແດງ N ວິນາທີ.

ໃນບົດສະຫຼຸບນີ້ຈະສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາຕອນທີ່ຈະເລີ່ມສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາຕອນທີ່ມີເວລາ 2 ວິນາທີ:

ຄວາມຈຳນວນ

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

ຊອກບຸກຄົນມື້ນີ້

ການຕັ້ງຄູ່ມູນສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາຕອນທີ່ຈະດຳເນີນການສະແດງຄັ້ງທີ່ຫຼາຍຫຼາຍ:

animation-iteration-count ປະສົມອາຊີບຕັ້ງໃສ່ສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາຕອນທີ່ຈະດຳເນີນການສະແດງຄັ້ງທີ່ຫຼາຍຫຼາຍ:

ບົດສະຫຼຸບນີ້ໃຊ້ຄູ່ມູນ 3 ຄັ້ງກ່ອນຈະຢຸດການສະແດງ:

ຄວາມຈຳນວນ

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

ຊອກບຸກຄົນມື້ນີ້

ບົດສະຫຼຸບນີ້ໃຊ້ຄູ່ມູນ "infinite" ເຮັດໃຫ້ການສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາຕອນທີ່ຫຼັງຫຼິ້ນຫຼິ້ນ:

ຄວາມຈຳນວນ

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

ຊອກບຸກຄົນມື້ນີ້

ການສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາຕອນທີ່ຫຼັງຫຼິ້ນຫຼິ້ນ, ຫຼືການປ່ຽນສະໜາມບັນຫາຕອນທີ່ຫຼັງຫຼິ້ນຫຼິ້ນ

animation-direction ປະສົມອາຊີບຕັ້ງໃສ່ສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາຕອນທີ່ໜ້າໄປ, ຫຼັງຈາກຫຼັງຫຼິ້ນຫຼັງຫຼິ້ນ, ຫຼືການປ່ຽນສະໜາມບັນຫາຕອນທີ່ຫຼັງຫຼິ້ນຫຼິ້ນ:

animation-direction 属性可接受以下值：

  • normal - ການສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາຕອນທີ່ຫຼັງ. ຄູ່ມູນສົມບູນ
  • reverse - ການສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາຕອນທີ່ຫຼັງ
  • alternate - ການສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາຕອນທີ່ມາກ່ອນຈາກຫຼັງ
  • alternate-reverse - ການສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາຕອນທີ່ຫຼັງຈາກມາກ່ອນ

ບົດສະຫຼຸບນີ້ຈະສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາຕອນທີ່ຫຼັງ:

ຄວາມຈຳນວນ

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

ຊອກບຸກຄົນມື້ນີ້

ບົດສະຫຼຸບນີ້ໃຊ້ຄູ່ມູນ "alternate" ເຮັດໃຫ້ການສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາຕອນທີ່ມາກ່ອນຈາກຫຼັງ:

ຄວາມຈຳນວນ

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

ຊອກບຸກຄົນມື້ນີ້

ບົດສະຫຼຸບນີ້ໃຊ້ຄູ່ມູນ "alternate-reverse" ເຮັດໃຫ້ການສະແດງສະເພາະການປ່ຽນສະໜາມບັນຫາຕອນທີ່ຫຼັງຈາກມາກ່ອນ:

ຄວາມຈຳນວນ

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

ຊອກບຸກຄົນມື້ນີ້

指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

  • ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
  • linear - ກຳນົດການຫລິ້ນອັນສະແດງທີ່ຈະມີຄວາມໄວທີ່ດຽວກັນຈາກຕົ້ນເຖິງຫລັງ:
  • ease-in - ກຳນົດການຫລິ້ນອັນສະແດງທີ່ຕົ້ນຈະດູດດົນ:
  • ease-out - ກຳນົດການຫລິ້ນອັນສະແດງທີ່ຫລັງຈະດູດດົນ:
  • ease-in-out - ກຳນົດການຫລິ້ນອັນສະແດງທີ່ຕົ້ນແລະຫລັງຈະດູດດົນ:
  • cubic-bezier(n,n,n,n) - ຕີມວັດຖຸທີ່ເຈົ້າຈະກໍານົດໂດຍຕົວເອງໃນການກຳນົດຄວາມທາງການສາຍສາຍສາຍບາງກັບການສະແດງອັນສະແດງ:

ບົດສະຫຼຸບນີ້ສະແດງວ່າຈະມີການນຳໃຊ້ການທາງການສະແດງທີ່ຫລາກຫລາຍ:

ຄວາມຈຳນວນ

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

ຊອກບຸກຄົນມື້ນີ້

ກຳນົດການຂະຫຍາຍການຫລິ້ນອັນສະແດງ:

CSS ການຫລິ້ນອັນສະແດງຈະບໍ່ສາມາດມີຜົນກະທົບປະກອບສັນນິວລະບົບກ່ອນຫລິ້ນອັນສະແດງທີ່ຕົ້ນຫລືຫລັງຈາກຫລິ້ນອັນສະແດງທີ່ສຸດ:animation-fill-mode ປະສົມອາກາດຈະສາມາດກວດກາການດັ່ງກ່າວ:

ບໍ່ມີການຫລິ້ນອັນສະແດງ (ກ່ອນການເລີ່ມຫລິ້ນ, ຫລັງຈາກຫລິ້ນ, ຫລືທັງສອງທາງ):animation-fill-mode ປະສົມອາກາດຈະກຳນົດການຈັດຕັ້ງຂອງປະກອບສັນນິວລະບົບຂອງປະກອບສັນນິວລະບົບຂອງປະກອບສັນນິວລະບົບ:

ປະສົມອາກາດ animation-fill-mode ຈະຍອມຮັບຄຳນວຍຄວາມທີ່:

  • none - ຄູ່ມືສົມບູນ. ການຫລິ້ນອັນສະແດງຈະບໍ່ຕິດຕາມການຈັດຕັ້ງທີ່ຈະຕິດຕາມປະກອບສັນນິວລະບົບກ່ອນຫລິ້ນອັນສະແດງຫລືຫລັງຈາກຫລິ້ນອັນສະແດງ:
  • forwards - ປະກອບສັນນິວລະບົບຈະຍັງຄົງຢູ່ທີ່ວັດຖຸການຈັດຕັ້ງທີ່ຕັ້ງໂຕ້ການຄຸນສຸດທ້າຍຂອງການຫລິ້ນອັນສະແດງ (ຖືກກຳນົດໂດຍ animation-direction ແລະ animation-iteration-count).
  • backwards - ປະກອບສັນນິວລະບົບຈະຮັບມາວັດຖຸການຈັດຕັ້ງທີ່ຕັ້ງໂຕ້ການຄຸນສຸດທ້າຍຂອງການຫລິ້ນອັນສະແດງ (ຖືກກຳນົດໂດຍ animation-direction), ແລະຈະຍັງຄົງຢູ່ທີ່ມັນຫລັງຈາກການລ່າວການຫລິ້ນອັນສະແດງ:
  • both - ການຫລິ້ນອັນສະແດງຈະຕິດຕາມຕາມກົດລະບຽບຂອງການເດີນທາງກ່ອນແລະທາງຫລັງຢ່າງເປັນເອກະລາດວ່າຈະຂະຫຍາຍທາງການສະແດງອັນສະແດງຂອງປະກອບສັນນິວລະບົບພາຍໃນສອງທາງ:

ບົດສະຫຼຸບນີ້ອາດສະແດງວ່າ <div> ສະຖານະການຈະຍັງຄົງຢູ່ທີ່ວັດຖຸຄຸນສຸດທ້າຍຂອງການຫລິ້ນອັນສະແດງ:

ຄວາມຈຳນວນ

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

ຊອກບຸກຄົນມື້ນີ້

ຄືນມື້ນີ້ຈະສະແດງວ່າປະກອບ <div> ຈະຈັດລະບຽບສັນຍາວັດທະນະທຳຂອງການສະແດງທຳອິດຂອງການສະແດງອາກາດໃນຂະນະທີ່ບໍ່ສະແດງອາກາດ (ໃນຂະນະທີ່ມີການລໍຖ້າການສະແດງອາກາດ):

ຄວາມຈຳນວນ

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

ຊອກບຸກຄົນມື້ນີ້

ຄືນມື້ນີ້ຈະສະແດງວ່າປະກອບ <div> ຈະຈັດລະບຽບສັນຍາວັດທະນະທຳຂອງການສະແດງທຳອິດຂອງການສະແດງອາກາດໃນຂະນະທີ່ບໍ່ສະແດງອາກາດ, ແລະຈະກັນລະບຽບສັນຍາວັດທະນະທຳຂອງການສະແດງອາກາດສຸດທ້າຍຂອງການສະແດງ:

ຄວາມຈຳນວນ

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

ຊອກບຸກຄົນມື້ນີ້

Animation Shorthand Properties

ຄືນມື້ນີ້ຈະສະແດງວ່າຂະແນະພາບຂອງການສະແດງອາກາດທີ່ຈະສະແດງຫົກບັນດາການສະແດງ:

ຄວາມຈຳນວນ

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

ຊອກບຸກຄົນມື້ນີ້

ການຈັດສັບການສະແດງອາກາດທີ່ຈະຈັດການສັບການຂອງຂະແນະພາບຂອງປະກອບອາກາດທັງໝົດ: animation ຂະແນະພາບກໍານົດສະແດງອາກາດທີ່ຈະສະແດງຄືກັນກັບຄືນມື້ນີ້:

ຄວາມຈຳນວນ

div {
  animation: example 5s linear 2s infinite alternate;
}

ຊອກບຸກຄົນມື້ນີ້

CSS Animation Properties

ມູນວິທະຍານີ້ສະແດງວ່າ @keyframes ກົດລະບຽບ ແລະ ຂະແນະພາບຂອງ CSS animation ທັງໝົດ:

ຂອງ ກ່າວເຖິງ
@keyframes ກໍານົດຮູບແບບຂອງການສະແດງອາກາດ.
animation ການຈັດສັບການສະແດງອາກາດທີ່ຈະຈັດການສັບການຂອງຂະແນະພາບຂອງປະກອບອາກາດທັງໝົດ.
animation-delay ກໍານົດເວລາທີ່ຄວນຈະລໍຖ້າການສະແດງອາກາດ.
animation-direction ກໍານົດວ່າການສະແດງອາກາດແມ່ນຈະຍິນຍານ, ກັບການສະແດງຫຼັງຫຼັງ, ຫຼືການສະແດງສອງການຫຼັງຫຼັງ.
animation-duration ກໍານົດເວລາທີ່ຄວນຈະໃຊ້ໃນການສະແດງອາກາດເພື່ອສົ່ງຫາຫຼັງຈາກສິ້ນສຸດການສະແດງອາກາດທີ່ຄວນຈະສະແດງ.
animation-fill-mode ກໍານົດການຈະຈັດລະບຽບສັນຍາວັດທະນະທຳຂອງປະກອບອາກາດໃນຂະນະທີ່ບໍ່ສະແດງອາກາດ (ກ່ອນສະແດງ, ຫຼືຫຼັງສະແດງ, ຫຼືທັງສອງແບບນັ້ນ)
animation-iteration-count ກໍານົດຈຳນວນການສະແດງອາກາດທີ່ຄວນຈະສະແດງ。
animation-name ກໍານົດຊື່ @keyframes ຂອງການສະແດງອາກາດ。
animation-play-state 规定动画是运行还是暂停。
animation-timing-function 规定动画的速度曲线。