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％（完成）），我们设置了样式何时改变。

သို့သော်လည်း သုံးစွဲနိုင်သော ရာခိုင်နှုန်း ကို အသုံးပြုနိုင်ပါ၏။ ရာခိုင်နှုန်း ကို အသုံးပြုခြင်းဖြင့် သင်သူက လိုချင်သော လုပ်ငန်း သုံးစွဲနိုင်သည်။

အောက်ပါ အမျိုးအစား သည် အမှတ် 25% တွင် လှုပ်ရှား ပြီးဆုံးသည့်အခါ 50% နှင့် 100% လှုပ်ရှား ပြီးဆုံးသည့်အခါ <div> အဆိုပါ အဆိုပါ အရေးယူခြင်း သည် ဗဟိုသား အရေးယူခြင်း အရောင်ကို ပြန်လည်ပြောင်းလဲသွားသည်:

အကျုံး

/* 动画代码 */
@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 秒。

အောက်ပါ အကြောင်းအရာများသည် လွှဲပြောင်းလာသည့် အသံလွှာကို လွှဲပြောင်းလာသည့် အချက်အလက်ကို အသုံးပြု၍ လွှဲပြောင်းလာသည့် အသံလွှာကို လွှဲပြောင်းလာသည့် အချက်အလက်ကို အသုံးပြု၍ လွှဲပြောင်းလာသည်:

အကျုံး

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

ကျွန်ုပ်တို့ ကျယ်ပြန်ကြည့်ကြသည်

လွှဲပြောင်းလာသည့် အသံလွှာကို အသုံးပြုသည့် ကြိမ်နှုန်း ကို အသုံးပြုသည်

animation-iteration-count အကိုင်းအချုပ် ကို လွှဲပြောင်းလာသည့် အသံလွှာကို အသုံးပြုသည်。

အောက်ပါ အကြောင်းအရာများသည် လွှဲပြောင်းလာသည့် အသံလွှာကို လုံးချင်း ၃ ကြိမ် လွှဲပြောင်းလာသည့် အချက်အလက်ကို အသုံးပြုသည်:

အကျုံး

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 - လမ်းကြောင်းမှုသည် အရှေ့သို့ နှင့် နောက်သို့ နှစ်ခုစလုံး စည်းကမ်းကို လိုက်နာပြီး နှစ်ခုစလုံး လမ်းကြောင်းအစိတ်အပိုင်းများ ကို ဖြိုးပွားစေပါသည်。

အမှတ် 1 အကျွဲ၏ အကြောင်းအရာကို <div> အကွက်အဖွဲ့ကို လမ်းကြောင်းမှုပြီးနောက် နောက်ဆုံး ကိုယ်စားပုံစံအသုံးပြုပါ:

အကျုံး

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

ကျွန်ုပ်တို့ ကျယ်ပြန်ကြည့်ကြသည်

အောက်ပါ အကျုံး တွင် အမျိုးအစား အနော် ကို ပြင်ဆင်ပေးသည်

အကျုံး

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

ကျွန်ုပ်တို့ ကျယ်ပြန်ကြည့်ကြသည်

အောက်ပါ အကျုံး တွင် အမျိုးအစား အနော် ကို ပြင်ဆင်ပေးသည်

အကျုံး

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

ကျွန်ုပ်တို့ ကျယ်ပြန်ကြည့်ကြသည်

အမျိုးအစား အနော် အစိတ်အစိတ်

အောက်ပါ အကျုံး တွင် ချီလက်ရာ အမျိုးအစား အနော် ခုနစ်မျိုး ကို အသုံးပြုပေးသည်

အကျုံး

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 အမျိုးအစား အနော်

အေအံအင်အေအိုင်အေ အမျိုးအစား အနော် နှင့် အေအံအင်အေအိုင်အေ အမျိုးအစား အချက်အလက် အုပ်စု ကို ပြုပြင်ပေးသည်

အကျုံး သုံးသပ်ချက်
@keyframes အမျိုးအစား အနော် ကို ပြင်ဆင်ပေးသည်
animation အမျိုးအစား အနော် ကို ပြင်ဆင်ပေးသည်
animation-delay အမျိုးအစား အနော် ကို ပြင်ဆင်ပေးသည်
animation-direction အမျိုးအစား အနော် ကို ပြင်ဆင်ပေးသည်
animation-duration အမျိုးအစား အနော် ကို ပြင်ဆင်ပေးသည်
animation-fill-mode အသားအမျိုးအစား အနော် ကို ပြင်ဆင်ပေးသည်
animation-iteration-count သတ်မှတ် အမျိုးအစား အနော် ကို ပြင်ဆင်ပေးသည်
animation-name သတ်မှတ် @keyframes အမျိုးအစား အနော်
animation-play-state 规定动画是运行还是暂停。
animation-timing-function 规定动画的速度曲线。