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

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

CSS 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！

CSS

在本章中，您将学习如下属性：

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

对动画的浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

ທີ່ຕາມ 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 动画？

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

@keyframes 规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

下面的例子将 "example" 动画绑定到

元素。动画将持续 4 秒钟，同时将
元素的背景颜色从 "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％（完成）），我们设置了样式何时改变。

您也可以使用百分比值。通过使用百分比，您可以根据需要添加任意多个样式更改。

ບົດຢ່າງລາວຈະປ່ຽນສະແດງມົນລະພາບ <div> ຂອງຄວາມສະຫລັກສີຫຼັງຈາກການຍິງວິດີໂອ 25%，50% ແລະວິດີໂອຈະສຳເລັດ 100%：

ຄວາມຄິດຈິງ

/* 动画代码 */
@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 ການສະແດງອາກາດທັງໝົດ:

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