စီစ်တိုက် @keyframes ချက်

အသုံးပြုနည်း

@keyframes ချက် အရ လက်ရှိ အနေအထား ကို ပြုပြင်ပါ。

လက်ရှိ အနေအထား ကို လက်ရှိ အနေအထား မှ လက်ရှိ အနေအထား သို့ အသားပေးပြီး လက်ရှိ အနေအထား ကို ပြုပြင်ပါ。

လက်ရှိ အနေအထား ကို လက်ရှိ အနေအထား ကို ပြုပြင်ပြီး လက်ရှိ အနေအထား ကို ပြုပြင်ပါ。

ပြောင်းလဲ ဖြစ်ပေါ်လာ သော စက္ခု ကို ရပ်ပေါ် အချက် နှင့် သို့မဟုတ် ကြောင်းသံ "from" နှင့် "to" ကို အသုံးပြုပါ。

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

အခွင့်အရေးရှိသော CSS စနစ်သုတ်သန်းအထားများ အတွက် အခွင့်အရေးရှိသော keyframe ရွေးချယ်ရာ

@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

တစ်ခုခုသော အခွင့်အရေးရှိသော လှည့်ပတ်ချိန်၏ စက္ခတန်းခန့်ခွဲ。

အခွင့်အရေးရှိသော တန်ဖိုးများ：

  • 0-100%
  • from（0% နှင့် ညီမျှ）
  • to（100% နှင့် ညီမျှ）
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-