CSS Animations

CSS သည် JavaScript သို့မဟုတ် Flash ကိုအသုံးမပြုဘဲ HTML ဒြပ်စင်များ၏ကာတွန်းကိုခွင့်ပြုသည်။

CSS

ဤအခန်းတွင် အောက်ပါဂုဏ်သတ္တိများအကြောင်း သင်လေ့လာပါမည်။

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

Animations အတွက် ဘရောက်ဆာ ပံ့ပိုးမှု

ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။

Property
@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 Animations ဆိုတာ ဘာလဲ။

ကာတွန်းတစ်ခုသည် ဒြပ်စင်တစ်ခုအား ပုံစံတစ်ခုမှ အခြားတစ်ခုကို တဖြည်းဖြည်း ပြောင်းလဲစေပါသည်။

သင်အလိုရှိသော CSS ဂုဏ်သတ္တိများကို အကြိမ်များစွာ ပြောင်းလဲနိုင်သည်။

CSS ကာတွန်းကို အသုံးပြုရန်၊ အန်နီမေးရှင်းအတွက် သော့ဘောင်အချို့ကို ဦးစွာ သတ်မှတ်ရပါမည်။

Keyframes သည် အချို့သောအချိန်များတွင် ဒြပ်စင်တွင်ရှိမည့် စတိုင်များကို ထိန်းထားသည်။

@keyframes စည်းမျဉ်း

စည်းမျဉ်း အတွင်း CSS စတိုင်များကို သင်သတ်မှတ်သောအခါ @keyframes ၊ လှုပ်ရှားသက်ဝင်မှုသည် အချို့အချိန်များတွင် လက်ရှိစတိုင်မှ စတိုင်အသစ်သို့ တဖြည်းဖြည်း ပြောင်းလဲသွားပါမည်။

ကာတွန်းတစ်ခု အလုပ်လုပ်ရန်၊ ကာတွန်းကို ဒြပ်စင်တစ်ခုနှင့် ချိတ်ထားရပါမည်။

အောက်ပါဥပမာသည် "ဥပမာ" ကာတွန်းအား <div> ဒြပ်စင်နှင့် ချိတ်ဆက်ထားသည်။ ကာတွန်းသည် 4 စက္ကန့်ကြာမည်ဖြစ်ပြီး၊ ၎င်းသည် <div> ဒြပ်စင်၏ နောက်ခံအရောင်ကို "အနီရောင်" မှ "အဝါ" သို့ တဖြည်းဖြည်း ပြောင်းလဲသွားလိမ့်မည်-

ဥပမာ

/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

မှတ်ချက်animation-duration ။ _ ပိုင်ဆိုင်မှုကို မသတ်မှတ်ထားပါ က animation-duration၊ မူရင်းတန်ဖိုးသည် 0s (0 စက္ကန့်) ဖြစ်သောကြောင့် ကာတွန်းပုံပေါ်လာမည်မဟုတ်ပါ။

အထက်ဖော်ပြပါ ဥပမာတွင် "မှ" နှင့် "သို့" (0% (စတင်) နှင့် 100% (ပြီးပြည့်စုံ) ကိုကိုယ်စားပြုသော) သော့ချက်စကားလုံးများကို အသုံးပြုခြင်းဖြင့် စတိုင်လ်ပြောင်းလဲမည်ကို ကျွန်ုပ်တို့သတ်မှတ်ထားပါသည်။

ရာခိုင်နှုန်းဖြင့်လည်း သုံးနိုင်သည်။ ရာခိုင်နှုန်းကိုအသုံးပြုခြင်းဖြင့်၊ သင်သည် စတိုင်ပြောင်းလဲမှုများစွာကို သင်နှစ်သက်သလောက်ထည့်နိုင်သည်။

ကာတွန်း 25% ပြီးမြောက်သောအခါ၊ 50% ပြီးသည်နှင့် ကာတွန်း 100% ပြီးသောအခါတွင် အောက်ပါဥပမာသည် <div> ဒြပ်စင်၏ နောက်ခံအရောင်ကို ပြောင်းလဲပါမည်-

ဥပမာ

/* The animation code */
@keyframes example {
  0%   {background-color: red;}
25% {background-color: yellow;}
  50% {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

ကာတွန်းသည် 25% ပြီးမြောက်သောအခါ၊ 50% ပြီးသည်နှင့် ကာတွန်းသည် 100% ပြီးသောအခါ နောက်တဖန် နောက်ခံ-အရောင်နှင့် <div> ဒြပ်စင်၏ အနေအထားကို ပြောင်းပါမည်-

ဥပမာ

/* The animation code */
@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;}
}

/* The element to apply the animation to */
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တစ်ခုသည် လုပ်ဆောင်ရမည့် အကြိမ်အရေအတွက်ကို သတ်မှတ်ပေးသည်။

အောက်ဖော်ပြပါ ဥပမာသည် ကာတွန်းကို မရပ်တန့်မီ 3 ကြိမ် လုပ်ဆောင်ပါမည်။

ဥပမာ

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

အောက်ဖော်ပြပါ ဥပမာသည် ကာတွန်းအား ထာဝရတည်မြဲစေရန်အတွက် တန်ဖိုး "အနန္တ" ကို အသုံးပြုသည်-

ဥပမာ

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 ၏ Speed Curve ကို သတ်မှတ်ပါ။

animation-timing-functionပိုင်ဆိုင်မှုသည် ကာတွန်း၏ အမြန်နှုန်းမျဉ်းကွေးကို သတ်မှတ်ပေးသည် ။

ကာတွန်း-အချိန်ကိုက်-လုပ်ဆောင်ချက် ပိုင်ဆိုင်မှုတွင် အောက်ပါတန်ဖိုးများ ရှိနိုင်သည်-

ease- နှေးနှေးစတင်ပြီးနောက်၊ အမြန်၊ ထို့နောက် ဖြည်းညှင်းစွာအဆုံးသတ်ပါ (၎င်းသည် မူရင်းဖြစ်သည်)
linear- အစမှအဆုံး တူညီသောအမြန်နှုန်းဖြင့် ကာတွန်းတစ်ခုကို သတ်မှတ်ပါ။
ease-in- နှေးနှေးစတင်ခြင်းဖြင့် ကာတွန်းတစ်ခုကို သတ်မှတ်ပါ။
ease-out- နှေးကွေးသောအဆုံးဖြင့် ကာတွန်းတစ်ခုကို သတ်မှတ်ပါ။
ease-in-out- နှေးကွေးသော အစနှင့်အဆုံး ကာတွန်းတစ်ခုကို သတ်မှတ်ပါ။
cubic-bezier(n,n,n,n)- cubic-bezier လုပ်ဆောင်ချက်တွင် သင့်ကိုယ်ပိုင်တန်ဖိုးများကို သတ်မှတ်နိုင်စေပါသည်။

အောက်ဖော်ပြပါ ဥပမာတွင် အသုံးပြုနိုင်သော မတူညီသော အမြန်နှုန်းမျဉ်းကွေးအချို့ကို ပြသသည်-

ဥပမာ

#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ကို မဖွင့်မီ၊ သို့မဟုတ် ပြီးဆုံးပြီးနောက် သို့မဟုတ် နှစ်ခုလုံးအတွက် ပိုင်ဆိုင်မှုသည် ပစ်မှတ်ဒြပ်စင်အတွက် စတိုင်တစ်ခု သတ်မှတ်ပေးသည်။

ကာတွန်း-ဖြည့်စွက်မုဒ် ပိုင်ဆိုင်မှုတွင် အောက်ပါတန်ဖိုးများ ရှိနိုင်သည်-

none- မူလတန်ဖိုး။ အန်နီမေးရှင်းသည် ၎င်းကိုလုပ်ဆောင်ခြင်းမပြုမီ သို့မဟုတ် လုပ်ဆောင်ပြီးနောက်တွင် မည်သည့်စတိုင်လ်များကိုမဆို အကျိုးသက်ရောက်စေမည်မဟုတ်ပါ။
forwards- ဒြပ်စင်သည် နောက်ဆုံးသော့ဘောင်ဖြင့် သတ်မှတ်ထားသော စတိုင်တန်ဖိုးများကို ဆက်လက်ထိန်းသိမ်းထားလိမ့်မည် (ကာတွန်းလမ်းညွှန်ချက်နှင့် ကာတွန်း-ထပ်ယူခြင်း-အရေအတွက်အပေါ် မူတည်သည်)
backwards - ဒြပ်စင်သည် ပထမသော့ဘောင်ဖြင့် သတ်မှတ်ထားသည့် စတိုင်တန်ဖိုးများကို ရရှိလိမ့်မည် (ကာတွန်း-လမ်းညွှန်မှုအပေါ် မူတည်သည်)၊ ကာတွန်းနှောင့်နှေးသည့်ကာလတွင် ၎င်းကို ထိန်းသိမ်းထားမည်ဖြစ်သည်။
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 Property

အောက်ဖော်ပြပါ ဥပမာသည် ကာတွန်းဂုဏ်သတ္တိ ခြောက်ခုကို အသုံးပြုသည်-

ဥပမာ

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 ကာတွန်းဂုဏ်သတ္တိများအားလုံးကို စာရင်းပြုစုထားသည်။

Property	Description
@keyframes	Specifies the animation code
animation	A shorthand property for setting all the animation properties
animation-delay	Specifies a delay for the start of an animation
animation-direction	Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration	Specifies how long time an animation should take to complete one cycle
animation-fill-mode	Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count	Specifies the number of times an animation should be played
animation-name	Specifies the name of the @keyframes animation
animation-play-state	Specifies whether the animation is running or paused
animation-timing-function	Specifies the speed curve of the animation

❮ ယခင် နောက်တစ်ခု ❯

CSS ကျူတိုရီရယ်

CSS အဆင့်မြင့်

CSS တုံ့ပြန်မှု

CSS Grid

CSS SASS

CSS နမူနာများ

CSS ကိုးကားချက်များ

CSS Animations

CSS Animations

Animations အတွက် ဘရောက်ဆာ ပံ့ပိုးမှု

CSS Animations ဆိုတာ ဘာလဲ။

@keyframes စည်းမျဉ်း

ဥပမာ

ဥပမာ

ဥပမာ

အန်နီမေးရှင်းကို နှောင့်နှေးပါ။

ဥပမာ

ဥပမာ

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

ဥပမာ

ဥပမာ

အန်နီမေးရှင်းကို ပြောင်းပြန်လမ်းကြောင်း သို့မဟုတ် အလှည့်ကျ စက်ဝိုင်းများတွင် လုပ်ဆောင်ပါ။

ဥပမာ

ဥပမာ

ဥပမာ

Animation ၏ Speed Curve ကို သတ်မှတ်ပါ။

ဥပမာ

ကာတွန်းတစ်ခုအတွက် ဖြည့်စွက်မုဒ်ကို သတ်မှတ်ပါ။

ဥပမာ

ဥပမာ

ဥပမာ

Animation Shorthand Property

ဥပမာ

ဥပမာ

လေ့ကျင့်ခန်းများဖြင့် သင့်ကိုယ်သင် စမ်းသပ်ပါ။

လေ့ကျင့်ခန်း

CSS Animation Properties

CSS ကျူတိုရီရယ်

CSS အဆင့်မြင့်

CSS တုံ့ပြန်မှု

CSS Grid

CSS SASS

CSS နမူနာများ

CSS ကိုးကားချက်များ

CSS Animations

CSS Animations

Animations အတွက် ဘရောက်ဆာ ပံ့ပိုးမှု

CSS Animations ဆိုတာ ဘာလဲ။

@keyframes စည်းမျဉ်း

ဥပမာ

ဥပမာ

ဥပမာ

အန်နီမေးရှင်းကို နှောင့်နှေးပါ။

ဥပမာ

ဥပမာ

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

ဥပမာ

ဥပမာ

အန်နီမေးရှင်းကို ပြောင်းပြန်လမ်းကြောင်း သို့မဟုတ် အလှည့်ကျ စက်ဝိုင်းများတွင် လုပ်ဆောင်ပါ။

ဥပမာ

ဥပမာ

ဥပမာ

Animation ၏ Speed ​​Curve ကို သတ်မှတ်ပါ။

ဥပမာ

ကာတွန်းတစ်ခုအတွက် ဖြည့်စွက်မုဒ်ကို သတ်မှတ်ပါ။

ဥပမာ

ဥပမာ

ဥပမာ

Animation Shorthand Property

ဥပမာ

ဥပမာ

လေ့ကျင့်ခန်းများဖြင့် သင့်ကိုယ်သင် စမ်းသပ်ပါ။

လေ့ကျင့်ခန်း

CSS Animation Properties

Animation ၏ Speed Curve ကို သတ်မှတ်ပါ။