دا انځور کړئ: تاسو په یوه نوې پروژه کې شامل شئ، کوډبیس کې ډوب کړئ، او په لومړیو څو ساعتونو کې، تاسو یو څه نا امیده پیژنئ. د سټایل شیټونو په اوږدو کې ویشل شوي، تاسو د ورته لومړني متحرکاتو لپاره ډیری @keyframes تعریفونه ومومئ. درې مختلف فیډ ان تاثیرات ، دوه یا درې سلایډ تغیرات ، یو لاسي زوم متحرکات ، او لږترلږه دوه مختلف سپن متحرکات ځکه چې ښه ، ولې نه؟ @keyframes نبض { له { پیمانه: 1; } ته { پیمانه: 1.1؛ } }
@keyframes لوی نبض { 0٪، 20٪، 100٪ { پیمانه: 1; } ۱۰٪، ۴۰٪ { پیمانه: 1.2؛ } }
که دا سناریو پیژني، تاسو یوازې نه یاست. په مختلفو پروژو کې زما په تجربه کې، یو له خورا دوامداره چټکو بریاوو څخه چې زه یې وړاندې کولی شم د کلیدي چوکاټونو پیاوړتیا او معیاري کول دي. دا دومره د باور وړ نمونه ګرځیدلې چې زه اوس په کوم نوي کوډبیس کې زما د لومړۍ دندې په توګه دې پاکولو ته سترګې په لار یم. د ګډوډۍ تر شا منطق دا بې ځایه کیدل سم معنی لري کله چې تاسو د هغې په اړه فکر کوئ. موږ ټول زموږ په ورځني کار کې ورته بنسټیز متحرکات کاروو: فیډونه، سلایډونه، زومونه، سپنونه، او نور عام اغیزې. دا متحرکات خورا ساده دي، او د کار سرته رسولو لپاره د چټک @keyframes تعریف کول اسانه دي. د مرکزي شوي انیمیشن سیسټم پرته ، پراختیا کونکي په طبیعي ډول دا کلیدي چوکاټونه له سکریچ څخه لیکي ، نه پوهیږي چې ورته حرکتونه دمخه په کوډبیس کې بل چیرې شتون لري. دا په ځانګړي توګه عام دی کله چې د اجزاو پراساس جوړښتونو کې کار کوي (کوم چې موږ ډیری یې پدې ورځو کې کوو) ، ځکه چې ټیمونه اکثرا د غوښتنلیک مختلف برخو کې موازي کار کوي. پایله؟ د حرکت ګډوډي. کوچنۍ ستونزه د کی فریم نقل کولو سره خورا څرګند مسلې د پراختیا وخت ضایع کول او غیر ضروري کوډ بلیټ دي. د څو کلیدي چوکاټ تعریفونه پدې معنی دي چې ډیری ځایونه د تازه کولو لپاره کله چې اړتیاوې بدلیږي. د خپل فاډ انیمیشن وخت تنظیمولو ته اړتیا لرئ؟ تاسو اړتیا لرئ د خپل کوډبیس په اوږدو کې هره بیلګه وپلټئ. ایا غواړئ د اسانتیا دندو معیاري کړئ؟ د ټولو تغیراتو په موندلو کې ښه بخت. د ساتنې پوائنټونو دا ضرب حتی ساده حرکت تازه کول د وخت مصرف کولو کار کوي. لویه ستونزه د دې کلیدي چوکاټونو نقل کول د سطحې لاندې پټه یوه خورا پراخه ستونزه رامینځته کوي: د نړیوال سکوپ جال. حتی کله چې د برخې پر بنسټ جوړښتونو سره کار کوي، د CSS کلیدي چوکاټونه تل په نړیواله کچه تعریف شوي. دا پدې مانا ده چې ټول کلیدي چوکاټونه په ټولو برخو کې پلي کیږي. تل. هو، ستاسو انیمیشن اړینه نه ده چې هغه کلیدي چوکاټونه وکاروي چې تاسو په خپل برخه کې تعریف کړي. دا وروستي کلیدي چوکاټونه کاروي چې د ورته ورته نوم سره سمون لري چې په نړیواله ساحه کې بار شوي. تر هغه چې ستاسو ټول کلیدي چوکاټونه یو شان وي، دا ممکن د یوې کوچنۍ مسلې په څیر ښکاري. مګر هغه شیبه چې تاسو غواړئ د ځانګړي کارونې قضیې لپاره حرکت تنظیم کړئ ، تاسو په ستونزه کې یاست ، یا بدتر ، تاسو به د دوی لامل شئ. یا ستاسو انیمیشن به کار ونکړي ځکه چې ستاسو وروسته بله برخه بار شوې، ستاسو د کی فریمونو بیا لیکل، یا ستاسو اجزا وروستی بار بار کوي او په ناڅاپي ډول د دې کی فریم نوم په کارولو سره د هرې بلې برخې لپاره د حرکت کولو چلند بدلوي، او تاسو ممکن حتی دا درک نه کړئ. دلته یو ساده مثال دی چې ستونزه ښیي: .component-one { /* د برخې سټایلونه */ انیمیشن: نبض 1s ease-in-out infinite alternate; }
/* دا @keyframes تعریف به کار ونکړي*/ @keyframes نبض { له { پیمانه: 1; } ته { پیمانه: 1.1؛ } }
/* وروسته په کوډ کې ... */
.component-دوه { /* د برخې سټایلونه */ انیمیشن: نبض 1s په اسانۍ سره بهر لامحدود؛ }
/* دا کلیدي چوکاټونه به په دواړو برخو کې پلي شي */ @keyframes نبض { 0٪، 20٪، 100٪ { پیمانه: 1; } ۱۰٪، ۴۰٪ { پیمانه: 1.2؛ } }
دواړه برخې د ورته حرکت نوم کاروي ، مګر دوهم @keyframes تعریف لومړی یو له سره لیکي. اوس دواړه برخې - یو او اجزا - دوه به دوهم کی فریمونه وکاروي ، پرته لدې چې کومې برخې کوم کلی فریمونه تعریف کړي. د قلم کلیدي چوکاټونه وګورئ - ډیمو 1 [فورک شوی] د امیت شین لخوا. تر ټولو بده برخه؟ دا ډیری وختونه په محلي پراختیا کې په بشپړ ډول کار کوي مګر په پراسرار ډول په تولید کې ماتیږي کله چې د جوړولو پروسې ستاسو د سټایل شیټونو بارولو ترتیب بدلوي. تاسو د متحرکاتو سره پای ته ورسیږئ چې مختلف چلند کوي پدې پورې اړه لري چې کوم برخې بار شوي او په کوم ترتیب کې. حل: متحد کلیدي چوکاټونه د دې ګډوډۍ ځواب په حیرانتیا سره ساده دی: دمخه تعریف شوي متحرک کی فریمونه په شریک سټایل شیټ کې زیرمه شوي. د دې پرځای چې هرې برخې ته اجازه ورکړئ خپل متحرکات تعریف کړئ ، موږ مرکزي کلیدي چوکاټونه رامینځته کوو چې ښه مستند شوي ، اسانه ديکارول، ساتلو وړ، او ستاسو د پروژې ځانګړو اړتیاو سره سمون لري. د دې په اړه فکر وکړئ د کلیدي چوکاټونو نښه. لکه څنګه چې موږ د رنګونو او فاصلو لپاره ټوکنونه کاروو، او زموږ څخه ډیری لا دمخه د حرکت کولو ملکیتونو لپاره ټوکنونه کاروو، لکه د مودې او اسانتیا دندو لپاره، ولې د کی فریمونو لپاره هم ټکي نه کاروئ؟ دا طریقه کولی شي په طبیعي ډول د اوسني ډیزاین ټوکن کاري فلو سره مدغم شي چې تاسو یې کاروئ ، پداسې حال کې چې دواړه کوچنۍ ستونزې (د کوډ نقل کول) او لویه ستونزه (د نړیوال ساحې شخړې) په یوځل کې حل کړئ. نظر مستقیم دی: زموږ د ټولو ګډ حرکتونو لپاره د حقیقت یوه واحد سرچینه رامینځته کړئ. دا شریک سټایل شیټ په احتیاط سره جوړ شوي کی فریمونه لري چې د حرکت نمونې پوښي چې زموږ پروژه واقعیا کاروي. نور اټکل مه کوئ چې ایا زموږ په کوډبیس کې یو فاډ حرکت دمخه شتون لري. نور په تصادفي ډول د نورو اجزاوو څخه متحرکات نه پورته کول. مګر دلته کلیدي ده: دا یوازې جامد کاپي پیسټ متحرکات ندي. دوی د CSS دودیز ملکیتونو له لارې متحرک او دودیز کولو لپاره ډیزاین شوي ، موږ ته اجازه راکوي چې دوام وساتو پداسې حال کې چې لاهم د ځانګړي کارونې قضیو ته د انیمیشنونو موافقت کولو انعطاف لرو ، لکه که تاسو په یو ځای کې یو څه لوی "نبض" حرکت ته اړتیا لرئ. د لومړي کی فریم ټوکن جوړول یو له لومړنیو ټیټ ځړولو میوو څخه چې موږ یې باید حل کړو د "فیډ ان" انیمیشن دی. زما په یوه وروستي پروژه کې ، ما له درجن څخه ډیر جلا جلا تعریفونه وموندل ، او هو ، دوی ټول په ساده ډول له 0 څخه تر 1 پورې شفافیت متحرک کړ. نو، راځئ چې یو نوی سټایل شیټ جوړ کړو، ورته kf-tokens.css ووایو، دا زموږ په پروژه کې وارد کړئ، او زموږ کلیدي چوکاټونه د هغې دننه د مناسبو نظرونو سره ځای په ځای کړئ. /* keyframes-tokens.css */
/* * فیډ ان - فیډ د ننوتلو انیمیشن * کارول: انیمیشن: kf-fade-in 0.3s په اسانۍ سره؛ */ @keyframes kf-fade-in { له { شفافیت: 0; } ته { شفافیت: 1; } }
دا واحد @keyframes اعالمیه زموږ د کوډبیس په اوږدو کې ټول خپاره شوي فیډ ان انیمیشنونه ځای په ځای کوي. پاک، ساده او په نړیواله کچه د تطبیق وړ. او اوس چې موږ دا نښه تعریف کړې، موږ کولی شو دا زموږ د پروژې په اوږدو کې له هرې برخې څخه وکاروو: ماډل { انیمیشن: kf-fade-in 0.3s په اسانۍ بهر؛ }
.tooltip { انیمیشن: kf-fade-in 0.2s په اسانۍ سره بهر؛ }
خبرتیا { انیمیشن: kf-fade-in 0.5s په اسانۍ بهر؛ }
د قلم کلیدي چوکاټونه وګورئ - ډیمو 2 [فورک شوی] د امیت شین لخوا. یادونه: موږ په خپلو ټولو @keyframes نومونو کې kf- مخکینۍ کاروو. دا مخفف د نوم ځای په توګه کار کوي چې په پروژه کې د موجوده متحرکاتو سره د نومونو شخړو مخه نیسي او سمدلاسه روښانه کوي چې دا کی فریمونه زموږ د کلیدي چوکاټونو ټوکن فایل څخه راځي. د متحرک سلایډ جوړول د kf-fade-in کی فریمونه خورا ښه کار کوي ځکه چې دا ساده دی او د شیانو ګډوډولو لپاره لږ ځای شتون لري. په نورو متحرکاتو کې، په هرصورت، موږ اړتیا لرو چې ډیر متحرک وي، او دلته موږ کولی شو د CSS دودیز ملکیتونو لوی ځواک ګټه پورته کړو. دا هغه ځای دی چې د کی فریم ټوکن واقعیا د خپریدونکي جامد متحرکاتو په پرتله روښانه کوي. راځئ چې یو عام سناریو واخلو: "سلایډ ان" متحرکات. مګر له کوم ځای څخه دننه شو؟ 100px له حق څخه؟ 50٪ د چپ څخه؟ ایا دا باید د سکرین له پورتنۍ برخې څخه ننوځي؟ یا شاید له لاندې څخه تیر شي؟ ډیری امکانات، مګر د دې پرځای چې د هر لوري او هر تغیر لپاره جلا کلیدي چوکاټونه رامینځته کړي، موږ کولی شو یو انعطاف وړ نښه جوړه کړو چې د ټولو سناریوګانو سره سمون لري: /* * سلایډ ان - لارښود سلایډ حرکت * د سمت کنټرول لپاره --kf-slide-from وکاروئ * ډیفالټ: له کیڼ څخه سلایډ (-100٪) *استعمال: * انیمیشن: kf-slide-in 0.3s په اسانۍ بهر؛ * --kf-slide-from: -100px 0; // له چپ څخه سلایډ * --kf-slide-from: 100px 0; // له ښي خوا سلایډ * --kf-slide-from: 0 -50px; // له پورته څخه سلایډ */
@keyframes kf-slide-in { له { ژباړه: var(--kf-slide-from, -100% 0); } ته { ژباړه: 0 0; } }
اوس موږ کولی شو دا واحد @keyframes ټوکن د هر سلایډ سمت لپاره په ساده ډول د --kf-slide-from دودیز ملکیت بدلولو سره وکاروو: .sidebar { انیمیشن: kf-slide-in 0.3s په اسانۍ بهر؛ /* ډیفالټ ارزښت کاروي: له کیڼ څخه سلایډ */ }
خبرتیا { انیمیشن: kf-slide-in 0.4s په اسانۍ بهر؛ --kf-slide-from: 0 -50px; /* له پورته څخه سلایډ */ }
ماډل { حرکت: kf-fade-in 0.5s، kf-slide-in 0.5s کیوبیک-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* له لاندینۍ ښیې څخه سلایډ */ }
دا طریقه موږ ته د نه منلو وړ انعطاف درکوي پداسې حال کې چې دوام لري. یو کلی فریم اعالمیه، لامحدود امکانات. د قلم کلیدي چوکاټونه وګورئ - ډیمو 3 [فورک شوی] د امیت شین لخوا. او که موږ غواړو خپل حرکتونه نور هم انعطاف منونکي کړو، د "سلایډ آوټ" اغیزو ته هم اجازه ورکول، موږ کولی شو.په ساده ډول دودیز ملکیت ته --kf-slide- اضافه کړئ، د هغه څه په څیر چې موږ به یې په راتلونکې برخه کې وګورو. دوه طرفه زوم کلیدي چوکاټونه یو بل عام حرکت چې د پروژو په اوږدو کې نقل کیږي د "زوم" اغیزې دي. که دا د ټوسټ پیغامونو لپاره فرعي پیمانه وي ، د موډلونو لپاره ډراماتیک زوم ان ، یا د سرلیکونو لپاره نرم پیمانه ښکته تاثیر ، د زوم متحرکات هرچیرې دي. د هرې کچې ارزښت لپاره د جلا کی فریمونو رامینځته کولو پرځای ، راځئ چې د kf-zoom کی فریمونو یو انعطاف وړ سیټ جوړ کړو:
/* * زوم - پیمانه حرکت * د پیمانه ارزښتونو کنټرول لپاره --kf-zoom-from او --kf-zoom-to وکاروئ * ډیفالټ: له 80٪ څخه تر 100٪ پورې زوم (0.8 څخه تر 1) *استعمال: * انیمیشن: kf-zoom 0.2s په اسانۍ سره؛ * --kf-zoom-from: 0.5; --kf-zoom-to: 1; // له 50٪ څخه تر 100٪ پورې زوم * --kf-zoom-from: 1; --kf-zoom-to: 0; // له 100٪ څخه تر 0٪ پورې زوم * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // له 100٪ څخه تر 110٪ پورې زوم */
@keyframes kf-zoom { له { پیمانه: var(--kf-zoom-from, 0.8); } ته { پیمانه: var(--kf-zoom-to, 1); } }
د یو تعریف سره، موږ کولی شو د زوم هر ډول توپیر ترلاسه کړو چې موږ ورته اړتیا لرو: .توست { حرکت: kf-slide-in 0.2s، kf-zoom 0.4s په اسانۍ سره --kf-slide-from: 0 100%; /* له پورته څخه سلایډ */ /* ډیفالټ زوم کاروي: له 80٪ څخه تر 100٪ پورې اندازه */ }
ماډل { انیمیشن: kf-zoom 0.3s مکعب بیزیر(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0; /* ډراماتیک زوم له 0٪ څخه تر 100٪ */ }
سرلیک { حرکت: kf-fade-in 2s، kf-zoom 2s په اسانۍ سره؛ --kf-zoom-from: 1.2; --kf-zoom-to: 0.8; /* نرم پیمانه ښکته */ }
د 0.8 (80٪) ډیفالټ د ډیری UI عناصرو لپاره په بشپړ ډول کار کوي ، لکه د توسټ پیغامونه او کارتونه ، پداسې حال کې چې لاهم د ځانګړي قضیو لپاره تنظیم کول اسانه دي. د قلم کلیدي چوکاټونه وګورئ - ډیمو 4 [فورک شوی] د امیت شین لخوا. تاسو ممکن په وروستي مثالونو کې یو څه په زړه پوري لیدلي وي: موږ متحرکات یوځای کوو. د @keyframes ټوکنونو سره د کار کولو یوه کلیدي ګټه دا ده چې دوی د یو بل سره په بې ساري ډول مدغم کولو لپاره ډیزاین شوي. دا نرم جوړښت قصدي دی، نه ناڅاپي. موږ به وروسته په تفصیل سره د حرکت ترکیب په اړه بحث وکړو، پشمول چیرې چې دوی ستونزمن کیدی شي، مګر ډیری ترکیبونه مستقیم او د پلي کولو لپاره اسانه دي. یادونه: د دې مقالې لیکلو پرمهال ، او شاید د دې لیکلو له امله ، ما ځان د ننوتلو متحرکاتو ټول نظر له سره فکر کاوه. په CSS کې د ټولو وروستیو پرمختګونو سره، ایا موږ لاهم ورته اړتیا لرو؟ خوشبختانه ، ادم ارګیل ورته پوښتنې وپلټلې او په خپل بلاګ کې یې په زړه پوري څرګندې کړې. دا د هغه څه سره مخالفت نه کوي چې دلته لیکل شوي ، مګر دا د پام وړ لید وړاندې کوي ، په ځانګړي توګه که ستاسو پروژې د ننوتلو متحرکاتو باندې خورا ډیر تکیه کوي. دوامداره متحرکات پداسې حال کې چې د ننوتلو متحرکات، لکه "فډ"، "سلایډ"، او "زوم" یو ځل پیښیږي او بیا ودریږي، دوامداره حرکتونه د پام وړ یا د روان فعالیت په ګوته کولو لپاره په ناڅرګنده توګه لوپ کوي. دوه خورا عام دوامداره متحرکات چې زه ورسره مخ یم هغه دي "سپن" (د شاخصونو بارولو لپاره) او "نبض" (د مهم عناصرو روښانه کولو لپاره). دا متحرکات ځانګړي ننګونې وړاندې کوي کله چې د کی فریمونو ټوکنونو رامینځته کولو خبره راځي. د ننوتلو متحرکاتو برخلاف چې معمولا له یو حالت څخه بل ته ځي ، دوامداره متحرکات باید د دوی د چلند نمونو کې خورا تنظیم وړ وي. د سپن ډاکټر هره پروژه داسې ښکاري چې ډیری سپن متحرکات کاروي. ځینې د ساعت په لور حرکت کوي، نور د ساعت په مقابل کې. ځینې یې د 360 درجې یو واحد گردش کوي، نور د ګړندۍ اغیزې لپاره څو وارونه کوي. د هر تغیر لپاره د جلا کلیدي چوکاټونو رامینځته کولو پرځای ، راځئ چې یو انعطاف وړ سپن جوړ کړو چې ټولې سناریوګانې اداره کړي:
/* * سپن - د حرکت حرکت * د --kf-spin-from او --kf-spin-to څخه د روټیشن رینج کنټرول لپاره وکاروئ * --kf-spin-turns وکاروئ ترڅو د گردش مقدار کنټرول کړئ * ډیفالټ: له 0deg څخه تر 360deg پورې څرخیږي (1 بشپړ گردش) *استعمال: * حرکت: kf-spin 1s خطي انفینیټ؛ * --kf-spin-turns: 2; // 2 بشپړ گردشونه * --kf-spin-from: 0deg; --kf-spin-to: 180deg; // نیمه گردش * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // د ساعت په مقابل کې */
@keyframes kf-spin { له { څرخول: var(--kf-سپين-څخه، 0deg)؛ } ته { څرخول: calc(var(-kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-سپين-ګرځېدل، 1)); } }
اوس موږ کولی شو هر ډول سپن توپیر رامینځته کړو چې موږ یې خوښوو:
.لوډینګ سپنر { انیمیشن: kf-spin 1s linear infinite; /* ډیفالټ کاروي: له 0deg څخه تر 360deg پورې څرخیږي */ }
.تیز بار وړونکی { انیمیشن: kf-spin 1.2s په آسانۍ سره انفینیټ بدیل؛ --kf-spin-turns: 3; /* په هر سایکل کې د هر لوري لپاره 3 بشپړ گردشونه*/ }
.steped-reverse { انیمیشن: kf-spin 1.5s مرحلې (8) لامحدود؛ --kf-spin-to: -360deg; /* د ساعت په مقابل کې*/ }
.subtle-wiggle { انیمیشن: kf-spin 2s په آسانۍ سره انفینیټ بدیل؛ --kf-spin-from: -16deg; --kf-spin-to: 32deg; /* 36 درجې وغځئ: د -18 درجې او + 18 درجې ترمنځ */ }
د قلم کلیدي چوکاټونه وګورئ - ډیمو 5 [فورک شوی] د امیت شین لخوا. د دې کړنلارې ښکلا دا ده چې ورته کی فریمونه د سپنرونو بارولو، څرخیدونکي شبیهونو، ویګل اغیزو، او حتی پیچلي څو اړخیز حرکتونو لپاره کار کوي. د نبض پاراډوکس د نبض حرکتونه خورا پیچلي دي ځکه چې دوی کولی شي مختلف ملکیتونه "نبض" کړي. ځینې یې پیمانه نبض کوي، نور یې د شفافیت پلس کوي، او ځینې د نبض رنګ ځانګړتیاوې لکه روښانتیا یا سنتریت. د هر ملکیت لپاره د جلا کی فریمونو رامینځته کولو پرځای ، موږ کولی شو کلیدي چوکاټونه رامینځته کړو چې د CSS ملکیت سره کار کوي. دلته د پیمانې او شفافیت اختیارونو سره د نبض کی فریم مثال دی:
/* * نبض - د حرکت حرکت * د پیمانه حد کنټرولولو لپاره --kf-pulse-scale-from او --kf-pulse-scale-to وکاروئ * --kf-pulse-opacity-from او --kf-pulse-opacity-to د شفافیت حد کنټرولولو لپاره وکاروئ * ډیفالټ: نبض نشته (ټول ارزښتونه 1) *استعمال: * انیمیشن: kf-pulse 2s په آسانۍ سره انفینیټ بدیل؛ * --kf-نبض-پیمانه-له: 0.95؛ --kf-نبض-پیمانه-تر: 1.05؛ // پیمانه نبض * --kf-نبض-اوپاسیټي-څخه: 0.7; --kf-نبض-اوپاسیتا-ته: 1; // د اوسپنې نبض */
@keyframes kf-pulse { له { پیمانه: var(--kf-نبض-پیمانه-څخه، 1); شفافیت: var(--kf-نبض-اوپاسیټي-څخه، 1)؛ } ته { پیمانه: var(--kf-pulse-scale-to, 1); شفافیت: var(--kf-نبض-اوپاسیتا-ته، 1)؛ } }
دا یو انعطاف وړ نبض رامینځته کوي چې کولی شي ډیری ملکیتونه متحرک کړي: .کال تر عمل { انیمیشن: kf-pulse 0.6s لامحدود بدیل؛ --kf-نبض-د شفافیت-څخه: 0.5; /* د شفافیت نبض */ }
.notification-dot { انیمیشن: kf-pulse 0.6s په آسانۍ سره انفینیټ بدیل؛ --kf-نبض-پیمانه-څخه: 0.9; --kf-نبض-پیمانه-تر: 1.1; /* پیمانه نبض */ }
متن روښانه کول { انیمیشن: kf-pulse 1.5s ease-out infinite; --kf-نبض-پیمانه-څخه: 0.8; --kf-نبض-د شفافیت-څخه: 0.2; /* پیمانه او د شفافیت نبض */ }
د قلم کلیدي چوکاټونه وګورئ - ډیمو 6 [فورک شوی] د امیت شین لخوا. دا واحد kf- نبض کی فریم کولی شي د فرعي پاملرنې ترلاسه کولو څخه تر ډراماتیک عالي څرګندونو پورې هرڅه اداره کړي ، پداسې حال کې چې تنظیم کول اسانه دي. پرمختللی اسانتیا د کی فریمز ټوکنونو کارولو په اړه یو له عالي شیانو څخه دا دی چې زموږ د انیمیشن کتابتون پراخول او تاثیرات چمتو کول څومره اسانه دي چې ډیری پراختیا کونکي به د سکریچ څخه لیکلو ته زړه ورنکړي ، لکه لچک یا باؤنس. دلته د ساده "باؤنس" کی فریمونو نښه یوه بیلګه ده چې د کود لوړوالي کنټرول لپاره د دودیز ملکیت څخه --kf-bounce- کاروي. /* * توپ اچونه - د ننوتلو حرکت حرکت * د کود لوړوالی کنټرول لپاره --kf-bounce-from وکاروئ * ډیفالټ: له 100vh څخه کودونه (د سکرین بند) *استعمال: * انیمیشن: kf-bounce 3s په اسانۍ سره؛ * --kf-bounce-from: 200px; // د 200px لوړوالی څخه کود */
@keyframes kf-bounce { 0% { ژباړه: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
۳۴٪ { ژباړه: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
۵۵٪ { ژباړه: 0 calc(var(-kf-bounce-from, 100vh) * -0.2); }
۷۲٪ { ژباړه: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
۸۵٪ { ژباړه: 0 calc(var(-kf-bounce-from, 100vh) * -0.05); }
۹۴٪ { ژباړه: 0 calc(var(-kf-bounce-from, 100vh) * -0.025); }
۹۹٪ { ژباړه: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22٪، 45٪، 64٪، 79٪، 90٪، 97٪، 100٪ { ژباړه: 0 0; animation-timeing-function: ease-out; } }
متحرکات لکه "لچک" یو څه پیچلي دي ځکه چې د کلیدي چوکاټونو دننه محاسبه کیږي. موږ اړتیا لرو --kf-elastic-from-X او --kf-elastic-from-Y په جلا توګه تعریف کړو (دواړه اختیاري دي)، او په ګډه دوی موږ ته اجازه راکوي چې د سکرین له هرې نقطې څخه یو لچک وړ ننوځي.
/* * لوچک ان - د ننوتلو لچک وړ حرکت * د پیل موقعیت کنټرول لپاره --kf-elastic-from-X او --kf-elastic-from-Y وکاروئ * ډیفالټ: له پورتنۍ مرکز څخه ننوځي (0, -100vh) *استعمال: * انیمیشن: kf-elastic-in 2s په اسانۍ سره دواړه؛ * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // له (-50px، -200px) څخه داخل کړئ */
@keyframes kf-elastic-in { 0% { ژباړه: calc(var(-kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
۱۶٪ { ژباړه: calc(var(-kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
۲۸٪ { ژباړه: calc(var(-kf-elastic-from-X, -50vw)* 0.1312)calc(var(-kf-elastic-from-Y, 0px) * 0.1312); }
۴۴٪ { ژباړه: calc(var(-kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
۵۹٪ { ژباړه: calc(var(-kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73٪ { ژباړه: calc(var(-kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
۸۸٪ { ژباړه: calc(var(-kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100٪ { ژباړه: 0 0; } }
دا طریقه زموږ د پروژې په اوږدو کې د پرمختللي کلید چوکاټونو بیا کارول او دودیز کول اسانه کوي، یوازې د یو واحد دودیز ملکیت بدلولو سره.
.bounce-and-zoom { حرکت: kf-bounce 3s په اسانۍ سره، kf-zoom 3s خطي؛ --kf-zoom-from: 0; }
.باؤنس او سلایډ { animation-composition: add; /* دواړه متحرکات ژباړه کاروي */ حرکت: kf-bounce 3s په اسانۍ سره، kf-slide-in 3s په اسانۍ بهر؛ --kf-slide-from: -200px; }
.eastic-in { انیمیشن: kf-elastic-in 2s په اسانۍ سره بهر دواړه؛ }
د قلم کلیدي چوکاټونه وګورئ - ډیمو 7 [فورک شوی] د امیت شین لخوا. تر دې وخته، موږ ولیدل چې څنګه موږ کولی شو کلیدي چوکاټونه په سمارټ او اغیزمنه توګه یوځای کړو. البته، تاسو ممکن د خپلې پروژې اړتیاو سره سم شیان ټیک کړئ، مګر موږ د ډیری عام حرکتونو او ورځني کارونې قضیې مثالونه پوښلي دي. او د دې کلیدي چوکاټونو ټوکنونو سره په ځای کې ، موږ اوس په ټوله پروژه کې د دوامداره ، ساتلو وړ متحرکاتو رامینځته کولو لپاره قوي ودانۍ بلاکونه لرو. نور نه نقل شوي کی فریمونه ، نور د نړیوال ساحې شخړې نشته. زموږ د ټولو حرکتونو اړتیاو اداره کولو لپاره یوازې پاکه ، اسانه لار. مګر اصلي پوښتنه دا ده: موږ څنګه دا ودانۍ بلاکونه یوځای ترکیب کوو؟ دا ټول یوځای کول موږ ولیدل چې د لومړني کلی فریم ټوکنونو ترکیب ساده دی. موږ کوم ځانګړي ته اړتیا نلرو مګر د لومړي حرکت تعریف کولو لپاره ، دوهم تعریف کړئ ، د اړتیا سره سم متغیرات تنظیم کړئ ، او بس. /* فیډ ان + سلایډ په */ .توست { حرکت: kf-fade-in 0.4s، kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* زوم ان + فیډ ان */ ماډل { حرکت: kf-fade-in 0.3s، kf-zoom 0.3s کیوبیک بیزیر(0.34, 1.56, 0.64, 1); --kf-زوم-څخه: 0.7; --kf-zoom-to: 1; }
/* سلایډ په + نبض */ خبرتیا { حرکت: kf-slide-in 0.5s، kf-pulse 1.2s په آسانۍ سره انفینیټ بدیل؛ --kf-slide-from: -100px 0; --kf-نبض-پیمانه-څخه: 0.95; --kf-نبض-پیمانه-تر: 1.05؛ }
دا ترکیبونه په ښه توګه کار کوي ځکه چې هر حرکت یو مختلف ملکیت په نښه کوي: شفافیت، بدلون (ژباړنه/پیمانه)، او داسې نور. مګر ځینې وختونه شخړې شتون لري، او موږ باید پوه شو چې ولې او څنګه ورسره معامله وکړو. کله چې دوه متحرکات هڅه کوي ورته ملکیت متحرک کړي - د مثال په توګه ، دواړه د متحرک کولو پیمانه یا دواړه متحرک کول - پایله به هغه څه نه وي چې تاسو یې تمه لرئ. په ډیفالټ کې ، یوازې یو متحرکات په حقیقت کې پدې ملکیت کې پلي کیږي ، کوم چې د حرکت لیست کې وروستی دی. دا یو محدودیت دی چې څنګه CSS په ورته ملکیت کې ډیری متحرکات اداره کوي. د مثال په توګه، دا به د هدف په توګه کار ونکړي ځکه چې یوازې د kf-pulse حرکت به پلي شي. بد کمبو { حرکت: kf-zoom 0.5s مخکې، kf-pulse 1.2s لامحدود بدیل؛ --kf-zoom-from: 0.5; --kf-zoom-to: 1.2; --kf-نبض-پیمانه-څخه: 0.8; --kf-نبض-پیمانه-تر: 1.1; }
د حرکت اضافه کول د ډیری متحرکاتو اداره کولو لپاره ترټولو ساده او خورا مستقیمه لاره چې ورته ملکیت اغیزه کوي د انیمیشن - جوړښت ملکیت کارول دي. په پورته وروستي مثال کې، د kf-pulse حرکت د kf-zoom حرکت ځای نیسي، نو موږ به لومړنی زوم ونه ګورو او د 1.2 تمه شوي پیمانه به ونه ګورو. د اضافه کولو لپاره د انیمیشن جوړښت ترتیب کولو سره، موږ براوزر ته وایو چې دواړه حرکتونه یوځای کړي. دا موږ ته هغه پایله راکوي چې موږ یې غواړو. .component-دوه { animation-composition: add; }
د قلم کلیدي چوکاټونه وګورئ - ډیمو 8 [فورک شوی] د امیت شین لخوا. دا طریقه د ډیری قضیو لپاره ښه کار کوي چیرې چې موږ غواړو په ورته ملکیت باندې تاثیرات یوځای کړو. دا هم ګټور دی کله چې موږ د جامد ملکیت ارزښتونو سره متحرکات یوځای کولو ته اړتیا لرو. د مثال په توګه، که موږ یو عنصر ولرو چې د ژباړې ملکیت کاروي ترڅو دا په سمه توګه ځای په ځای کړي چې موږ یې غواړو، او بیا موږ غواړو چې دا د kf-slide-in کی فریمونو سره متحرک کړو، موږ د انیمیشن جوړښت پرته یو ناوړه ښکاره کود ترلاسه کوو. د قلم کلیدي چوکاټونه وګورئ - ډیمو 9 [فورک شوی] د امیت شین لخوا. د اضافه کولو لپاره د حرکت کولو ترکیب سره ، حرکت په اسانۍ سره د موجوده سره یوځای کیږيبدل کړئ، نو عنصر په خپل ځای کې پاتې کیږي او د تمې سره سم حرکت کوي. د انیمیشن سټیګر د ډیری متحرکاتو اداره کولو بله لاره دا ده چې دوی "ټکر کړئ" - دا د لومړي حرکت پای ته رسیدو وروسته دوهم حرکت پیل کړئ. دا د حل لاره نه ده چې د هرې قضیې لپاره کار کوي، مګر دا ګټور دی کله چې موږ د ننوتلو انیمیشن ولرو وروسته د دوامداره حرکت سره. /* په دقت پلس */ خبرتیا { حرکت: kf-fade-in 2s په اسانۍ بهر، kf-pulse 0.5s 2s په آسانۍ سره انفینیټ بدیل؛ --kf-نبض-د شفافیت-تر: 0.5؛ }
د قلم کلیدي چوکاټونه وګورئ - ډیمو 10 [فورک شوی] د امیت شین لخوا. د امر موضوع د متحرکاتو لویه برخه چې موږ ورسره کار کوو د لیږد ملکیت کاروي. په ډیری قضیو کې، دا په ساده ډول ډیر اسانه دی. دا د فعالیت ګټه هم لري ځکه چې د بدلون متحرکات د GPU ګړندي کیدی شي. مګر که موږ بدلونونه وکاروو، موږ باید دا ومنو چې هغه ترتیب چې موږ خپل بدلونونه ترسره کوو مهم دي. خورا ډیر. زموږ په کلیدي چوکاټونو کې تر دې دمه، موږ انفرادي بدلونونه کارولي دي. د ځانګړتیاوو له مخې، دا تل په یو ثابت ترتیب کې پلي کیږي: لومړی، عنصر ژباړل کیږي، بیا څرخیږي، بیا پیمانه. دا معنی لري او هغه څه دي چې زموږ څخه ډیری یې تمه لري. که څه هم، که موږ د بدلون ملکیت وکاروو، هغه ترتیب چې افعال یې لیکل کیږي هغه ترتیب دی چې پلي کیږي. په دې حالت کې، که موږ یو څه په ایکس محور کې 100 پیکسله حرکت وکړو او بیا یې 45 درجې وګرځوو، دا داسې نه ده چې لومړی یې 45 درجې څرخوي او بیا یې 100 پیکسله حرکت کوي. /* ګلابي مربع: لومړی ژباړه، بیا وګرځوئ */ .example-one { transform: translateX(100px) rotate(45deg); }
/* شنه مربع: لومړی وګرځئ، بیا ژباړئ */ .مثال دوه { transform: rotate(45deg) translateX(100px); }
د قلم کلیدي چوکاټونه وګورئ - ډیمو 11 [فورک شوی] د امیت شین لخوا. مګر د بدلون ترتیب سره سم، ټول انفرادي بدلونونه - هر هغه څه چې موږ د کلیدي چوکاټونو لپاره کارولي دي - د بدلون د کارونو څخه مخکې پیښیږي. د دې معنی دا ده چې هر هغه څه چې تاسو د لیږد ملکیت کې تنظیم کوئ د متحرکاتو وروسته به پیښ شي. مګر که تاسو ترتیب کړئ، د مثال په توګه، د kf-spin کلیدي چوکاټونو سره یوځای ژباړه، ژباړه به د حرکت څخه مخکې واقع شي. تر اوسه مغشوش؟! دا د داسې شرایطو لامل کیږي چیرې چې جامد ارزښتونه د ورته حرکت لپاره مختلف پایلې رامینځته کولی شي ، لکه په لاندې قضیه کې:
/* د دواړو سپنرانو لپاره عام حرکت */ سپنر { انیمیشن: kf-spin 1s linear infinite; }
/* ګلابي سپنر: د څرخیدو دمخه ژباړه (انفرادي بدلون) */ .سپنر-ګلابي { ژباړه: 100% 50%; }
/* شنه اسپینر: وګرځئ بیا ژباړئ (د فعالیت ترتیب) */ .سپنر شنه { بدلون: ژباړه (100٪، 50٪)؛ }
د قلم کلیدي چوکاټونه وګورئ - ډیمو 12 [فورک شوی] د امیت شین لخوا. تاسو لیدلی شئ چې لومړی سپنر (ګلابي) یو ژباړونکی ترلاسه کوي چې د kf-spin د ګرځیدو دمخه پیښیږي ، نو دا لومړی خپل ځای ته ځي او بیا سپن کوي. دوهم اسپینر (شنه) د ژباړې () فنکشن ترلاسه کوي چې د انفرادي بدلون وروسته پیښیږي ، نو عنصر لومړی سپن کیږي ، بیا د اوسني زاویې سره سم حرکت کوي ، او موږ دا پراخه مدار اغیزه ترلاسه کوو. نه، دا کومه ستونزه نه ده. دا یوازې یو له هغو شیانو څخه دی چې موږ ورته اړتیا لرو د CSS په اړه پوهیږو او په ذهن کې وساتئ کله چې د ډیری متحرکاتو یا څو بدلونونو سره کار کوي. که اړتیا وي، تاسو کولی شئ د kf-spin-alt کلیدي چوکاټونو اضافي سیټ هم رامینځته کړئ چې د rotate() فنکشن په کارولو سره عناصر گردش کوي. کم شوی حرکت او پداسې حال کې چې موږ د بدیل کی فریمونو په اړه خبرې کوو، موږ نشو کولی د "هیڅ حرکت" اختیار له پامه غورځوو. د کی فریم ټیکونو کارولو یوه لویه ګټه دا ده چې لاسرسی په کې پخلی کیدی شي ، او دا واقعیا خورا اسانه ده. په ذهن کې د لاسرسي سره زموږ د کلیدي چوکاټونو ډیزاین کولو سره، موږ کولی شو ډاډ ترلاسه کړو چې هغه کاروونکي چې کم حرکت غوره کوي د اضافي کار یا کوډ نقل کولو پرته، اسانه، لږ ګډوډ تجربه ترلاسه کوي. د "کم شوي حرکت" دقیق معنی کولی شي یو څه له یو حرکت څخه بل ته بدل شي، او له پروژې څخه پروژې ته، مګر دلته یو څو مهم ټکي دي چې په ذهن کې وساتئ: د کلیدي چوکاټونو خاموش کول پداسې حال کې چې ځینې متحرکات نرم یا سست کیدی شي، نور شتون لري چې باید په بشپړه توګه ورک شي کله چې د کم حرکت غوښتنه وشي. د نبض حرکتونه یو ښه مثال دی. د دې لپاره چې ډاډ ترلاسه کړئ چې دا متحرکات د کم شوي حرکت حالت کې نه چلیږي، موږ کولی شو دوی په مناسبه میډیا پوښتنې کې وتړو.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { له { پیمانه: var(--kf-نبض-پیمانه-څخه، 1); شفافیت: var(--kf-نبض-اوپاسیټي-څخه، 1)؛ } ته { پیمانه: var(--kf-pulse-scale-to, 1); شفافیت:var(--kf-نبض-اوپاسیتا-ته، 1); } } }
دا ډاډ ورکوي چې هغه کاروونکي چې د کمولو لپاره یې ترجیحات کم شوي حرکت ټاکلی دی حرکت به ونه ګوري او داسې تجربه به ترلاسه کړي چې د دوی غوره توب سره سمون لري. په فوري توګه دننه دلته ځینې کلیدي چوکاټونه شتون لري چې موږ نشو کولی په ساده ډول لرې کړو، لکه د ننوتلو حرکتونه. ارزښت باید بدل شي، باید متحرک شي؛ که نه نو، عنصر به سم ارزښتونه ونه لري. مګر په کم حرکت کې، د لومړني ارزښت څخه دا لیږد باید سمدستي وي. د دې ترلاسه کولو لپاره ، موږ به د کلیدي چوکاټونو اضافي سیټ تعریف کړو چیرې چې ارزښت سمدلاسه پای حالت ته ځي. دا زموږ ډیفالټ کی فریمونه کیږي. بیا، موږ به د میډیا پوښتنې دننه منظم کلیدي چوکاټونه اضافه کړو د ترجیحاتو-کم شوي-حرکت لپاره غیر ترجیح ته سیټ، لکه د تیر مثال په څیر. /* د کم حرکت لپاره سمدلاسه پاپ ان */ @keyframes kf-zoom { له، څخه تر { پیمانه: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* اصلي زوم کی فریمونه */ @keyframes kf-zoom { له { پیمانه: var(--kf-zoom-from, 0.8); } ته { پیمانه: var(--kf-zoom-to, 1); } } }
په دې توګه، هغه کاروونکي چې کم شوي حرکت ته ترجیح ورکوي عنصر به په سمدستي توګه په خپل وروستي حالت کې ښکاره شي، پداسې حال کې چې هرڅوک متحرک لیږد ترلاسه کوي. نرم چلند داسې قضیې شتون لري چیرې چې موږ غواړو یو څه حرکت وساتو ، مګر د اصلي حرکت په پرتله خورا نرم او آرام. د مثال په توګه، موږ کولی شو د باؤنس ننوتل د نرم فیډ ان سره بدل کړو.
@keyframes kf-bounce { /* د کم حرکت لپاره نرم غوړ شوی */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* اصلي باؤنس کی فریمونه */ } }
اوس، د کم حرکت فعال شوي کاروونکي لاهم د ظاهري احساس احساس کوي، مګر د باؤنس یا لچک وړ حرکت حرکت پرته. د ودانۍ بلاکونو سره په ځای کې، بله پوښتنه دا ده چې څنګه دوی د اصلي کاري فلو برخه جوړوي. د انعطاف وړ کی فریمونو لیکل یو شی دی ، مګر د یوې لویې پروژې په اوږدو کې د دوی باوري کول یو څو ستراتیژیو ته اړتیا لري چې ما باید سخته لاره زده کړې وای. د پلي کولو ستراتیژۍ او غوره کړنې یوځل چې موږ د کی فریم ټوکنونو قوي کتابتون ولرو ، اصلي ننګونه دا ده چې څنګه یې ورځني کار ته راوړو.
ازمایښت دا دی چې ټول کلیدي چوکاټونه په یوځل کې پریږدئ او ستونزه حل شوې اعلان کړئ ، مګر په عمل کې ما وموندله چې غوره پایلې د تدریجي اختیار څخه راځي. د خورا عام متحرکاتو سره پیل کړئ ، لکه فیډ یا سلایډ. دا اسانه بریاوې دي چې د لوی بیا لیکلو اړتیا پرته سمدستي ارزښت ښیې. نوم ورکول یو بل ټکی دی چې د پاملرنې وړ دی. یو ثابت مخکینۍ یا نوم ځای دا روښانه کوي چې کوم متحرکات ټکي دي او کوم ځایي یو بند دي. دا د ناڅاپي ټکرونو مخه هم نیسي او د ټیم نوي غړو سره مرسته کوي چې شریک سیسټم په یو نظر کې وپیژني. اسناد د کوډ په څیر مهم دي. حتی د هر کلی فریم نښه پورته یوه لنډه تبصره کولی شي وروسته د اټکل ساعتونه خوندي کړي. یو پراختیا کونکی باید وکوالی شي د ټوکن فایل خلاص کړي ، د هغه اغیز لپاره سکین وکړي چې دوی ورته اړتیا لري ، او د کارونې نمونه مستقیم د دوی برخې ته کاپي کړي. انعطاف هغه څه دي چې دا طریقه د هڅو ارزښت لري. د حساس دودیز ملکیتونو په افشا کولو سره، موږ ټیمونو ته خونه ورکوو ترڅو د سیسټم ماتولو پرته انیمیشن تطبیق کړي. په ورته وخت کې، هڅه وکړئ چې ډیر پیچلي نه وي. هغه غوټۍ چمتو کړئ چې مهم دي او پاتې نظرونه وساتئ. په پای کې، د لاسرسي په یاد ولرئ. هر حرکت د کم حرکت بدیل ته اړتیا نلري، مګر ډیری یې کوي. په دې تعدیلاتو کې په پیل کې بیک کول پدې معنی دي چې موږ هیڅکله دوی وروسته بیا تنظیم نه کړو ، او دا د پاملرنې کچه ښیې چې زموږ کارونکي به یې پام وکړي حتی که دوی هیڅکله یې یادونه ونه کړي.
زما په تجربه کې ، زموږ د ډیزاین ټوکن کاري فلو برخې په توګه د کی فریم ټوکن درملنه هغه څه دي چې دوی یې چپه کوي. یوځل چې دوی ځای په ځای شي ، دوی د ځانګړي تاثیراتو په څیر احساس کوي او د ډیزاین ژبې برخه کیږي ، طبیعي توسیع چې محصول څنګه حرکت کوي او ځواب ورکوي. ورګډول متحرکات د جوړونې انٹرفیس یو له خورا خوندور برخو څخه کیدی شي ، مګر د جوړښت پرته ، دوی کولی شي د مایوسۍ ترټولو لوی سرچینې هم شي. د ټکنونو په توګه د کلیدي چوکاټونو په درملنه کولو سره، تاسو یو څه اخلئ چې معمولا ګډوډ وي او اداره کول یې سخت وي او دا په روښانه، وړاندوینې وړ سیسټم بدلوي. اصلي ارزښت یوازې د کوډ څو لینونو خوندي کولو کې ندي. دا په باور کې دی چې کله تاسو فیډ، سلایډ، زوم، یا سپن کاروئ، تاسو په سمه توګه پوهیږئ چې دا به په ټوله پروژه کې څنګه چلند وکړي. دا په انعطاف کې دی چې د نه ختمیدونکي تغیراتو ګډوډي پرته د دودیز ملکیتونو څخه راځي. او دا د لاسرسي په برخه کې دی چې په بنسټ کې رامینځته شوی د دې پرځای چې اضافه شيیو وروسته فکر. ما ولیدل چې دا نظرونه په مختلفو ټیمونو او مختلف کوډبیسونو کې کار کوي، او نمونه تل ورته وي. یوځل چې ټوکنونه ځای په ځای شي ، کی فریمونه د چلونو پراخه ټولګه ودروي او د ډیزاین ژبې برخه شي. دوی محصول ډیر ارادي، ډیر ثابت، او ډیر ژوندی احساسوي. که تاسو له دې مقالې څخه یو شی واخلئ، اجازه راکړئ چې دا وي: متحرکات د ورته پاملرنې او جوړښت مستحق دي چې موږ دمخه رنګونو، ټایپوګرافۍ او فاصلو ته ورکوو. په کلیدي چوکاټونو کې کوچنۍ پانګه اچونه هرکله چې ستاسو انٹرفیس حرکت کوي تادیه کوي.
