CSS လှည့်ပတ်

အမျိုးအမိုး

/* 动画代码 */
@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 {
  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 အလင်းပတ် အချိန်အား

ဒီ အချိန်အား အချက်အလက်များ နှင့် အလင်းပတ် အချိန်အား ကို ဖော်ပြထားသည်။

အကူအညီ

CSS ကိုးကွယ်ရာ

CSS အစီအစဉ်

CSS စစ်

CSS အခြေခံ အစီအစဉ်

ထောက်ပံ့သူ ချက်