ئەمە بگرە: تۆ بەشداری پڕۆژەیەکی نوێ دەکەیت، خۆت دەخزێتە ناو بنکەی کۆدەکانەوە و لە چەند کاتژمێری یەکەمدا، شتێکی ئاشنایەکی بێزارکەر دەدۆزیتەوە. پەرش و بڵاو لە سەرانسەری ستایلشیتەکاندا، چەندین پێناسەی @keyframes بۆ هەمان ئەنیمەیشنە بنەڕەتییەکان دەدۆزیتەوە. سێ کاریگەری جیاوازی کاڵبوونەوە، دوو یان سێ جۆری سلاید، مشتێک ئەنیمەیشنی زووم، و لانیکەم دوو ئەنیمەیشنی جیاوازی خولاندنەوە چونکە، باشە، بۆچی نا؟ @keyframes پەلسی { لە { پێوەر: 1؛ } بۆ { پێوەر: 1.1؛ } }
@keyframes گەورەتر-پەلسی { 0%، 20%، 100% { پێوەر: 1؛ } 10%، 40% { پێوەر: 1.2؛ } }
ئەگەر ئەم سیناریۆیە ئاشنا دەربکەوێت، ئەوا تۆ تەنیا نیت. بە ئەزموونی من لە سەرانسەری پڕۆژە جیاوازەکاندا، یەکێک لە بەردەوامترین سەرکەوتنە خێراکان کە دەتوانم بیگەیەنم چەسپاندن و ستانداردکردنی چوارچێوەی سەرەکییە. بووەتە نەخشێکی هێندە جێی متمانە کە ئێستا بەوپەڕی چاوەڕوانییەوە چاوەڕێی ئەم پاککردنەوەم دەکەم وەک یەکێک لە یەکەم ئەرکەکانم لەسەر هەر بنکەیەکی کۆدێکی نوێ. لۆژیکی پشت ئاژاوە ئەم زیادەڕۆییە کاتێک بیری لێدەکەیتەوە، تەواو مانای هەیە. هەموومان هەمان ئەنیمەیشنە بنەڕەتییەکان لە کارەکانی ڕۆژانەماندا بەکاردەهێنین: کاڵبوونەوە، سلایدکردن، زوومکردن، خولاندنەوە و کاریگەرییە باوەکانی تر. ئەم ئەنیمەیشنانە زۆر ڕاستەوخۆن، و ئاسانە پێناسەیەکی خێرا @keyframes بکەیت بۆ ئەوەی کارەکە تەواو بکەیت. بەبێ سیستەمێکی ئەنیمەیشنی ناوەندی، گەشەپێدەران بە شێوەیەکی سروشتی ئەم کلیلفڕێمانە لە سفرەوە دەنووسن، بێ ئاگا لەوەی کە ئەنیمەیشنی هاوشێوە پێشتر لە شوێنەکانی دیکەی بنکەی کۆدەکاندا هەن. ئەمە بە تایبەتی باو و ئاساییە لەکاتی کارکردن لە تەلارسازییە بنەمادارەکانی پێکهاتەکاندا (کە زۆربەمان لەم ڕۆژانەدا دەیکەین)، چونکە زۆرجار تیمەکان بە شێوەیەکی هاوتەریب کاردەکەن لە سەرانسەری بەشە جیاوازەکانی بەرنامەکەدا. ئەنجامەکەی؟ ئاژاوەی ئەنیمەیشن. کێشەی بچووک دیارترین کێشەکانی دووبارەبوونەوەی کیفڕایمەکان بریتین لە بەفیڕۆدانی کاتەکانی پەرەپێدان و کۆدەکانی ناپێویست. چەندین پێناسەی چوارچێوەی کلیل بە واتای چەندین شوێن دێت بۆ نوێکردنەوە کاتێک پێداویستییەکان دەگۆڕدرێن. پێویستە کاتی ئەنیمەیشنی کاڵکردنەوەت ڕێکبخەیت؟ پێویستە هەموو نموونەیەک لە سەرانسەری بنکەدراوەی کۆدەکەتدا ڕاو بکەیت. دەتەوێت کاراییەکانی ئاسانکاری ستاندارد بکەیت؟ بەختێکی باش بۆ دۆزینەوەی هەموو جۆرەکانی. ئەم چەسپاندنەی خاڵەکانی چاککردنەوە تەنانەت نوێکردنەوەی ئەنیمەیشنی سادەش دەکاتە ئەرکێکی کات بەفیڕۆدەر. کێشەی گەورەتر ئەم دووبارەبوونەوەی چوارچێوە سەرەکییە کێشەیەکی زۆر فێڵبازتر دروست دەکات کە لە ژێر ڕووی زەویدا خەریکی خۆدزینەوەیە: تەڵەی بازنەی جیهانی. تەنانەت لە کاتی کارکردن لەگەڵ بیناسازییەکانی بنەمادار بە پێکهاتەکان، چوارچێوەی کلیلی CSS هەمیشە لە بازنەی جیهانیدا پێناسە دەکرێن. ئەمەش واتە هەموو کیفڕێمەکان بۆ هەموو پێکهاتەکان دەگونجێت. گشت کاتێک. بەڵێ، مەرج نییە ئەنیمەیشنەکەت ئەو کلیلفرێمانە بەکاربهێنێت کە لە پێکهاتەکەتدا پێناسەت کردووە. دوا چوارچێوەی کلیل بەکاردەهێنێت کە لەگەڵ هەمان ناودا دەگونجێت کە لە بازنەی جیهانیدا بارکراون. تا ئەو کاتەی هەموو کلیلفڕێمەکانت یەکسان بن، ئەمە ڕەنگە وەک کێشەیەکی بچووک دەرکەوێت. بەڵام ئەو ساتەی کە دەتەوێت ئەنیمەیشنێک بۆ حاڵەتێکی بەکارهێنانی دیاریکراو خۆت دابنێیت، تۆ تووشی کێشە دەبیت، یان لەوەش خراپتر، تۆ ئەو کەسە دەبیت کە هۆکاری ئەوان دەبیت. یان ئەنیمەیشنەکەت کارناکات چونکە پێکهاتەیەکی تر دوای ئەوەی تۆ بارکرا، نووسینەوەی چوارچێوەی کلیلەکانت، یان پێکهاتەکەت دواجار باردەکرێت و بە هەڵە هەڵسوکەوتی ئەنیمەیشن بۆ هەموو پێکهاتەیەکی تر دەگۆڕێت بە بەکارهێنانی ناوی ئەو چوارچێوەی کلیلییە، و لەوانەیە تەنانەت درک بەو شتە نەکەیت. لێرەدا نموونەیەکی سادە دەخەینەڕوو کە کێشەکە نیشان دەدات: .پێکهاتە-یەک { /* شێوازەکانی پێکهاتەکان */ ئەنیمەیشن: پەلسی 1s ئاسانکاری لە دەرەوە بێکۆتایی جێگرەوە؛ }
/* ئەم پێناسەیەی @keyframes کار ناکات */ @keyframes پەلسی { لە { پێوەر: 1؛ } بۆ { پێوەر: 1.1؛ } }
/* دواتر لە کۆدەکەدا... */
.پێکهاتە-دوو { /* شێوازەکانی پێکهاتەکان */ ئەنیمەیشن: پەلسی 1s ئاسانکاری-لە دەرەوە بێکۆتایی؛ }
/* ئەم keyframes بۆ هەردوو پێکهاتەکە دەگونجێت */ @keyframes پەلسی { 0%، 20%، 100% { پێوەر: 1؛ } 10%، 40% { پێوەر: 1.2؛ } }
هەردوو پێکهاتەکە هەمان ناوی ئەنیمەیشن بەکاردەهێنن، بەڵام پێناسەی دووەمی @keyframes یەکەمیان دەنووسێتەوە. ئێستا هەردوو پێکهاتەی یەکەم و پێکهاتەی دووەم چوارچێوەی سەرەکی دووەم بەکاردەهێنن، بەبێ گوێدانە ئەوەی کام پێکهاتە کام چوارچێوەی سەرەکی پێناسە کردووە. سەیری تۆکنەکانی قەڵەم Keyframes بکە - دیمۆ 1 [forked] لەلایەن Amit Sheen. خراپترین بەش؟ زۆرجار ئەمە لە پەرەپێدانی ناوخۆییدا بە تەواوی کاردەکات بەڵام بە شێوەیەکی نهێنی لە بەرهەمهێناندا دەشکێت کاتێک پرۆسەکانی دروستکردن ڕێکوپێکی بارکردنی ستایلشیتەکانت دەگۆڕن. لە کۆتاییدا ئەنیمەیشنەکانت دەست دەکەوێت کە ڕەفتارێکی جیاوازیان هەیە بەپێی ئەوەی کام پێکهاتە بارکراوە و بە چ ڕیزبەندییەک. چارەسەر: چوارچێوەی سەرەکی یەکگرتوو وەڵامی ئەم ئاژاوەگێڕییە بە شێوەیەکی سەرسوڕهێنەر سادەیە: چوارچێوەی کلیلی داینامیکی پێشوەختە پێناسەکراو کە لە ستایلشیتێکی هاوبەشدا هەڵگیراون. لەبری ئەوەی ڕێگە بدەین هەموو پێکهاتەیەک ئەنیمەیشنەکانی خۆی پێناسە بکات، ئێمە چوارچێوەی سەرەکی ناوەندی دروست دەکەین کە بە باشی بەڵگەنامە کراون، ئاسانن بۆ...بەکارهێنان، پارێزگاریکردن و بەپێی پێداویستییە تایبەتەکانی پڕۆژەکەت. وەکو تۆکنی کیفڕایم بیری لێبکەرەوە. هەروەک چۆن ئێمە تۆکن بۆ ڕەنگ و دووری بەکاردەهێنین و زۆرێک لە ئێمە پێشتر تۆکن بۆ تایبەتمەندی ئەنیمەیشن بەکاردەهێنین، وەکو ماوەی کارکردن و ئاسانکردنی فەنکشنەکان، بۆچی تۆکن بۆ کیفڕایمەکانیش بەکارنەهێنین؟ ئەم ڕێبازە دەتوانێت بە شێوەیەکی سروشتی لەگەڵ هەر کاریگەرێکی نیشانەی دیزاینی ئێستا کە بەکاری دەهێنیت یەکبگرێتەوە، لە هەمان کاتدا هەردوو کێشە بچووکەکە (دوبارەکردنەوەی کۆدەکان) و کێشە گەورەکە (ناکۆکییەکانی بازنەی جیهانی) لە یەک جاردا چارەسەر دەکات. بیرۆکەکە ڕاستەوخۆیە: یەک سەرچاوەی ڕاستی بۆ هەموو ئەنیمەیشنە باوەکانمان دروست بکە. ئەم ستایلشیتە هاوبەشە کلیلفڕێمەکانی بە وردی دروستکراو لەخۆدەگرێت کە ئەو نەخشانەی ئەنیمەیشن دەگرێتەوە کە پڕۆژەکەمان لە ڕاستیدا بەکاریدەهێنێت. چیتر پێشبینی ئەوە ناکەین کە ئایا ئەنیمەیشنێکی کاڵ لە ئێستاوە لە شوێنێک لە بنکەدراوەی کۆدەکانماندا بوونی هەیە یان نا. چیتر بە هەڵە ئەنیمەیشنەکان لە پێکهاتەکانی ترەوە نەنووسرێتەوە. بەڵام لێرەدا کلیلەکە هەیە: ئەمانە تەنها ئەنیمەیشنی کۆپی-پەیستی ئیستاتیک نین. ئەوان بە شێوەیەک دیزاین کراون کە داینامیکی و خۆکارانە بن لە ڕێگەی تایبەتمەندییە تایبەتەکانی CSS، ڕێگەمان پێدەدات یەکدەنگی بپارێزین لە هەمان کاتدا هێشتا نەرمیمان هەیە بۆ گونجاندنی ئەنیمەیشنەکان لەگەڵ حاڵەتەکانی بەکارهێنانی تایبەت، وەک ئەگەر پێویستت بە ئەنیمەیشنێکی کەمێک گەورەتری "پەلس" بێت لە شوێنێکدا. دروستکردنی یەکەم تۆکنی Keyframes یەکێک لە یەکەم میوەی نزم هەڵواسراو کە پێویستە ڕووبەڕووی ببینەوە، ئەنیمەیشنی "کاڵبوونەوە"یە. لە یەکێک لە پڕۆژەکانی ئەم دواییەمدا، زیاتر لە دەیان پێناسەی جیاوازی کاڵبوونەوەم دۆزیەوە، و بەڵێ، هەموویان بە سادەیی ناڕوونییەکانیان لە 0 بۆ 1 ئەنیمەیشن کرد. کەواتە، با ستایلشیتێکی نوێ دروست بکەین، ناوی لێ بنین kf-tokens.css، هاوردەی بکەین بۆ ناو پڕۆژەکەمان، و کلیلفرێمەکانمان بە کۆمێنتی دروست لەناوەوە دابنێین. /* keyframes-tokens.css */
/* * Fade In - ئەنیمەیشنی چوونە ژوورەوەی fade * بەکارهێنان: ئەنیمەیشن: kf-fade-in 0.3s ئاسانکاری؛ */ @keyframes kf-کاڵبوونەوە-لە { لە { ناڕوونی: 0؛ } بۆ { ناڕوونی: 1؛ } }
ئەم تاکە ڕاگەیاندنە @keyframes جێگەی هەموو ئەو ئەنیمەیشنە پەرش و بڵاوانەی کاڵبووەوە دەگرێتەوە لە سەرانسەری بنکەدراوەی کۆدەکانماندا. پاک و سادە و لە ئاستی جیهانیدا کارپێکراوە. وە ئێستا کە ئەم نیشانەیەمان پێناسە کردووە، دەتوانین لە هەر پێکهاتەیەکەوە بە درێژایی پڕۆژەکەمان بەکاری بهێنین: .مۆداڵ { ئەنیمەیشن: kf-fade-in 0.3s ئاسانکاری؛ }
.tooltip { ئەنیمەیشن: kf-fade-in 0.2s ئاسانکاری لە دەرەوە؛ }
.ئاگادارکردنەوە { ئەنیمەیشن: kf-fade-in 0.5s ئاسانکاری؛ }
سەیری تۆکنەکانی قەڵەم Keyframes بکە - Demo 2 [forked] لەلایەن Amit Sheen. تێبینی: ئێمە پێشگرێکی kf- بەکاردەهێنین لە هەموو ناوەکانی @keyframes ـماندا. ئەم پێشگرە وەکو شوێنی ناو کاردەکات کە ڕێگری دەکات لە ناکۆکی ناونانی لەگەڵ ئەنیمەیشنە هەبووەکانی ناو پڕۆژەکە و یەکسەر ئەوە ڕوون دەکاتەوە کە ئەم کلیلفڕێمانە لە فایلە کیفڕایمەکانی تۆکنەکانمانەوە هاتوون. دروستکردنی سلایدێکی داینامیکی keyframes kf-fade-in زۆر باش کاردەکەن چونکە سادەیە و شوێنێکی کەمی هەیە بۆ تێکدانی شتەکان. بەڵام لە ئەنیمەیشنەکانی تردا پێویستە زۆر دینامیکتر بین و لێرەدا دەتوانین هێزی گەورەی تایبەتمەندییە تایبەتەکانی CSS بەکاربهێنین. ئەمەیە کە بەڕاستی تۆکنەکانی کیفڕایمەکان دەدرەوشێنەوە بە بەراورد بە ئەنیمەیشنە ئیستاتیکییە پەرش و بڵاوەکان. با سیناریۆیەکی باو وەربگرین: ئەنیمەیشنەکانی “slide-in”. بەڵام لە کوێوە خلیسکێنە ناوەوە؟ 100px لە لای ڕاستەوە؟ 50% لە لای چەپەوە؟ ئایا پێویستە لە سەرەوەی شاشەکەوە بچێتە ژوورەوە؟ یان ڕەنگە لە خوارەوە هەڵبفڕێتەوە؟ ئەگەری زۆرە، بەڵام لەبری ئەوەی چوارچێوەی سەرەکی جیاواز بۆ هەر ئاراستەیەک و هەر گۆڕانکارییەک دروست بکەین، دەتوانین یەک نیشانەی نەرم و نیان دروست بکەین کە لەگەڵ هەموو سیناریۆکان بگونجێت: /* * Slide In - ئەنیمەیشنی سلایدی ئاراستەیی * بۆ کۆنترۆڵکردنی ئاراستە --kf-slide-from بەکاربهێنە * بە شێوەیەکی بنەڕەتی: لە چەپەوە دەچێتە ژوورەوە (-100%) * بەکارهێنان: * ئەنیمەیشن: kf-slide-in 0.3s ئاسانکاری؛ * --kf-slide-لە: -100px 0؛ // لە چەپەوە خلیسکێنە * --kf-slide-لە: 100px 0؛ // لە ڕاستەوە سلاید بکە * --kf-slide-لە: 0 -50px؛ // لە سەرەوە خلیسکێنە */
@keyframes kf-سلاید-لە { لە { وەرگێڕان: var(--kf-slide-لە، -100% 0); } بۆ { وەرگێڕان: 0 0; } }
ئێستا دەتوانین ئەم تاکە نیشانەیە @keyframes بۆ هەر ئاراستەیەکی سلاید بەکاربهێنین تەنها بە گۆڕینی تایبەتمەندی تایبەتمەند --kf-slide-from: .sidebar { . ئەنیمەیشن: kf-slide-in 0.3s ئاسانکاری؛ /* بەهای پێشوەختە بەکاردەهێنێت: سلایدەکان لە چەپەوە */ }
.ئاگادارکردنەوە { ئەنیمەیشن: kf-slide-in 0.4s ئاسانکاری؛ --kf-slide-لە: 0 -50px؛ /* سلاید لە سەرەوە */ }
.مۆداڵ { ئەنیمەیشن: kf-fade-in 0.5s، kf-slide-in 0.5s سێجا-بێزیەر (0.34، 1.56، 0.64، 1); --kf-slide-from: 50px 50px؛ /* سلاید لە خوارەوە-ڕاست */ }
ئەم ڕێبازە نەرمییەکی باوەڕپێنەکراومان پێدەبەخشێت لە هەمان کاتدا یەکدەنگی دەپارێزین. یەک ڕاگەیاندنی چوارچێوەی سەرەکی، ئەگەرە بێکۆتاکان. سەیری تۆکنەکانی قەڵەم Keyframes بکە - دیمۆ 3 [forked] لەلایەن Amit Sheen. وە ئەگەر بمانەوێت ئەنیمەیشنەکانمان هێندەی تر نەرم و نیان بکەین، ڕێگە بە کاریگەرییەکانی "سلاید-ئاوت"یش بدەین، دەتوانینبە سادەیی تایبەتمەندییەکی تایبەت بە --kf-slide-to زیاد بکە، هاوشێوەی ئەوەی لە بەشی داهاتوودا دەیبینین. Keyframes زووم دووئاڕاستە ئەنیمەیشنێکی دیکەی باو کە لە سەرانسەری پڕۆژەکاندا دووبارە دەبێتەوە، کاریگەرییەکانی "زووم"ە. جا گەورەکردنێکی ورد بێت بۆ پەیامەکانی تۆست، گەورەکردنی دراماتیک بۆ مۆداڵەکان، یان کاریگەری بچووککردنەوەی نەرم بۆ سەردێڕەکان، ئەنیمەیشنی زووم لە هەموو شوێنێک هەیە. لەبری ئەوەی چوارچێوەی سەرەکی جیاواز بۆ هەر بەهایەکی پێوانە دروست بکەین، با یەک کۆمەڵەیەکی نەرم و نیان لە چوارچێوەی سەرەکی kf-zoom دروست بکەین:
/* * زووم - ئەنیمەیشنی پێوانە * --kf-zoom-from و --kf-zoom-to بەکاربهێنە بۆ کۆنترۆڵکردنی بەهاکانی پێوەر * بە شێوەیەکی بنەڕەتی: زووم دەکات لە 80% بۆ 100% (0.8 بۆ 1) * بەکارهێنان: * ئەنیمەیشن: kf-zoom 0.2s ئاسانکاری؛ * --kf-zoom-لە: 0.5؛ --kf-zoom-to: 1؛ // زوومکردن لە 50% بۆ 100% * --kf-zoom-لە: 1؛ --kf-zoom-to: 0؛ // زوومکردن لە 100% بۆ 0% * --kf-zoom-لە: 1؛ --kf-zoom-to: 1.1؛ // زوومکردن لە 100% بۆ 110% */
@keyframes kf-زووم { لە { پێوەر: var (--kf-زووم-لە، 0.8); } بۆ { پێوەر: var(--kf-زووم-بۆ، 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-لە: 0؛ /* زووم دراماتیک لە 0% بۆ 100% */ }
.سەردێڕی { ئەنیمەیشن: kf-fade-in 2s، kf-zoom 2s ئاسانکاری؛ --kf-zoom-from: 1.2؛ --kf-زووم-بۆ: 0.8؛ /* نەرم و نیان پێوەرەکە دابەزێنە */ }
بەپێی پێشوەختە 0.8 (80%) بە تەواوی کاردەکات بۆ زۆربەی توخمەکانی UI، وەک پەیامی تۆست و کارتەکان، لە هەمان کاتدا هێشتا ئاسانە بۆ خۆکارکردن بۆ حاڵەتە تایبەتەکان. سەیری تۆکنەکانی قەڵەم Keyframes بکە - دیمۆ 4 [forked] لەلایەن Amit Sheen. لەوانەیە لە نموونەکانی ئەم دواییەدا سەرنجت داوە شتێکی سەرنجڕاکێشت: ئێمە ئەنیمەیشنەکانمان تێکەڵ کردووە. یەکێک لە سوودە سەرەکییەکانی کارکردن لەگەڵ تۆکنەکانی @keyframes ئەوەیە کە بە شێوەیەک دیزاین کراون کە بە شێوەیەکی بێ کێشە لەگەڵ یەکتردا یەکبگرن. ئەم پێکهاتە نەرمە بە مەبەستە نەک بەڕێکەوت. دواتر بە وردی باس لە پێکهاتەی ئەنیمەیشن دەکەین، لەوانەش لە کوێدا دەتوانن ببنە کێشە، بەڵام زۆربەی پێکهاتەکان ڕاستەوخۆن و ئاسانن بۆ جێبەجێکردن. تێبینی: لە کاتی نووسینی ئەم بابەتەدا، و ڕەنگە بەهۆی نووسینەکەیەوە، خۆمم بینیەوە کە بیرم لە تەواوی بیرۆکەی ئەنیمەیشنی چوونە ژوورەوە کردۆتەوە. لەگەڵ ئەو هەموو پێشکەوتنانەی ئەم دواییەی CSS، ئایا هێشتا پێویستمان پێیان هەیە بەهیچ شێوەیەک؟ خۆشبەختانە ئادەم ئارگیل هەمان پرسیارەکانی گەڕاندەوە و لە بلۆگەکەیدا بە شێوەیەکی درەوشاوە دەریخست. ئەمە دژایەتی ئەو شتانە نییە کە لێرەدا نووسراوە، بەڵام ڕێبازێک دەخاتە ڕوو کە شایەنی ڕەچاوکردنە، بە تایبەت ئەگەر پڕۆژەکانت زۆر پشت بە ئەنیمەیشنی چوونە ژوورەوە ببەستن. ئەنیمەیشنی بەردەوام لە کاتێکدا ئەنیمەیشنی چوونە ژوورەوە، وەک "کاڵبوونەوە"، "خلیسکاندن" و "زووم" جارێک ڕوودەدەن و دواتر دەوستن، ئەنیمەیشنە بەردەوامەکان بۆ ماوەیەکی نادیار لوپ دەبن بۆ ئەوەی سەرنج ڕابکێشن یان ئاماژە بە چالاکییە بەردەوامەکان بکەن. دوو باوترین ئەنیمەیشنی بەردەوام کە ڕووبەڕووم دەبنەوە بریتین لە "spin" (بۆ نیشاندەری بارکردن) و "pulse" (بۆ تیشک خستنە سەر توخمە گرنگەکان). ئەم ئەنیمەیشنانە تەحەدای ناوازە دەخەنە ڕوو کاتێک باس لە دروستکردنی تۆکنی کیفڕێم دەکرێت. بە پێچەوانەی ئەنیمەیشنی چوونە ژوورەوە کە بە شێوەیەکی گشتی لە حاڵەتێکەوە بۆ حاڵەتێکی تر دەڕۆن، ئەنیمەیشنە بەردەوامەکان پێویستە لە شێوازی ڕەفتارەکانیاندا زۆر خۆکارانە بن. دکتۆری سپین پێدەچێت هەموو پڕۆژەیەک چەندین ئەنیمەیشنی خولاندنەوە بەکاربهێنێت. هەندێکیان بە ئاراستەی کاتژمێر دەسوڕێنەوە، هەندێکی تریان بە ئاراستەی دژە کاتژمێر. هەندێکیان یەک خولانەوەی ٣٦٠ پلە ئەنجام دەدەن، هەندێکی تر چەندین سوڕانەوە دەکەن بۆ ئەوەی کاریگەری خێراتریان هەبێت. لەبری ئەوەی چوارچێوەی سەرەکی جیاواز بۆ هەر گۆڕانکارییەک دروست بکەین، با یەک خولگەی نەرم دروست بکەین کە مامەڵە لەگەڵ هەموو سیناریۆکان بکات:
/* * خولاندنەوە - ئەنیمەیشنی خولانەوەی * بەکارهێنانی --kf-spin-from و --kf-spin-to بۆ کۆنترۆڵکردنی مەودای خولانەوەی * بەکارهێنانی --kf-spin-turns بۆ کۆنترۆڵکردنی بڕی خولانەوەی * پێشوەختە: لە 0deg بۆ 360deg دەسوڕێتەوە (1 خولانەوەی تەواو) * بەکارهێنان: * ئەنیمەیشن: kf-spin 1s هێڵی بێکۆتایی؛ * --kf-spin-turns: 2؛ // ٢ خولانەوەی تەواو * --kf-spin-لە: 0deg؛ --kf-spin-to: 180 پلە؛ // نیوە خولانەوەی * --kf-spin-لە: 0deg؛ --kf-spin-to: -360deg؛ // بە ئاراستەی دژە کاتژمێر */
@keyframes kf-spin { لە { سوڕانەوە: var (--kf-spin-لە، 0deg); } بۆ { سوڕانەوە: calc (var (--kf-خولاندنەوە-لە، 0deg) + var (--kf-خولاندنەوە-بۆ، 360deg) * var (--kf-خولاندنەوە-دەگۆڕێت، 1)); } }
ئێستا دەتوانین هەر جۆرە خولگەیەک کە حەزمان لێیە دروست بکەین:
.بارکردن-سپینەر { ئەنیمەیشن: kf-spin 1s هێڵی بێکۆتایی؛ /* پێشوەختە بەکاردەهێنێت: لە 0deg دەسوڕێتەوە بۆ 360deg */ }
.خێرا-لۆدەر { ئەنیمەیشن: kf-spin 1.2s ئاسانکاری لە دەرەوە بێکۆتایی جێگرەوە؛ --kf-spin-turns: 3؛ /* 3 خولانەوەی تەواو بۆ هەر ئاراستەیەک بۆ هەر خولێک*/ }
.هەنگاودار-پێچەوانە { ئەنیمەیشن: kf-spin هەنگاوەکانی 1.5s(8) بێکۆتایی؛ --kf-spin-to: -360deg؛ /* بە ئاراستەی دژە کاتژمێر */ }
.subtle-wiggle { . ئەنیمەیشن: kf-spin 2s ئاسانکاری لە دەرەوە بێکۆتایی جێگرەوە؛ --kf-spin-لە: -16deg؛ --kf-spin-to: 32deg؛ /* wiggle 36 deg: لە نێوان -18deg و +18deg */ }
سەیری تۆکنەکانی قەڵەم Keyframes بکە - Demo 5 [forked] لەلایەن Amit Sheen. جوانی ئەم ڕێگایە ئەوەیە کە هەمان کلیلفرێمەکان کاردەکەن بۆ بارکردنی سپینەرەکان، ئایکۆنەکانی سووڕاوە، کاریگەرییەکانی وەرچەرخان و تەنانەت ئەنیمەیشنە ئاڵۆزەکانی فرە وەرچەرخان. پارادۆکسی پەستانی خوێن ئەنیمەیشنەکانی پەلسی فێڵاویترن چونکە دەتوانن تایبەتمەندییە جیاوازەکان "پەلس" بکەن. هەندێکیان پەستانی تەرازووەکە دەدەن، هەندێکی تریان پەستانی ناڕوونی و هەندێکیان تایبەتمەندی ڕەنگی پەلسی وەک ڕووناکی یان تێربوون. لەبری ئەوەی چوارچێوەی سەرەکی جیاواز بۆ هەر تایبەتمەندییەک دروست بکەین، دەتوانین چوارچێوەی سەرەکی دروست بکەین کە لەگەڵ هەر تایبەتمەندییەکی 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-pulse-scale-to: 1.05؛ // پەستانی پێوانە * --kf-پەلسی-ناڕوونی-لە: 0.7؛ --kf-pulse-opacity-to: 1؛ // پەلسی ناڕوونی */
@keyframes kf-pulse { لە { پێوەر: var (--kf-پەلسی-پێوەر-لە، 1); ناڕوونی: var(--kf-پەلسی-ناڕوونی-لە، 1); } بۆ { پێوەر: var(--kf-پەلسی-پێوەر-بۆ، 1); ناڕوونی: var(--kf-پەلسی-ناڕوونی-بۆ، 1); } }
ئەمەش پەلسی نەرم دروست دەکات کە دەتوانێت چەندین تایبەتمەندی ئەنیمەیشن بکات: .بانگەواز بۆ کردار { ئەنیمەیشن: kf-pulse 0.6s جێگرەوەی بێکۆتایی؛ --kf-pulse-opacity-لە: 0.5؛ /* پەلسی ناڕوونی */ }
.ئاگادارکردنەوە-خاڵ { ئەنیمەیشن: kf-pulse 0.6s ئاسانکاری لە دەرەوە بێکۆتایی جێگرەوە؛ --kf-pulse-scale-لە: 0.9؛ --kf-pulse-scale-to: 1.1؛ /* پەستانی پێوەر */ }
.text-highlight { ئەنیمەیشن: kf-pulse 1.5s ئاسانکاری بێکۆتایی؛ --kf-pulse-scale-لە: 0.8؛ --kf-pulse-opacity-لە: 0.2؛ /* پەستانی پێوەر و ناڕوونی */ }
سەیری تۆکنەکانی قەڵەم Keyframes بکە - Demo 6 [forked] لەلایەن Amit Sheen. ئەم تاکە kf-pulse keyframe دەتوانێت مامەڵە لەگەڵ هەموو شتێکدا بکات لە سەرنج ڕاکێشانی وردەوە تا هێمای دراماتیک، هەموو ئەمانە لەکاتێکدا ئاسانە بۆ خۆکارکردن. ئاسانکاری پێشکەوتوو یەکێک لە شتە گەورەکانی بەکارهێنانی تۆکنەکانی کیفڕایم ئەوەیە کە چەندە ئاسانە کتێبخانەی ئەنیمەیشنەکانمان فراوان بکەین و کاریگەرییەکان دابین بکەین کە زۆربەی گەشەپێدەران خۆیان بە زەحمەت نازانن لە سفرەوە بینووسن، وەکو لاستیک یان وەرگەڕان. لێرەدا نموونەیەک لە نیشانەیەکی سادەی "bounce" keyframes کە تایبەتمەندی تایبەتمەند --kf-bounce-from بەکاردەهێنێت بۆ کۆنترۆڵکردنی بەرزی بازدان. /* * Bounce - ئەنیمەیشنی چوونە ژوورەوەی bounce * بەکارهێنانی --kf-bounce-from بۆ کۆنترۆڵکردنی بەرزی بازدان * بە شێوەیەکی بنەڕەتی: باز دەدات لە 100vh (لە دەرەوەی شاشە) * بەکارهێنان: * ئەنیمەیشن: kf-bounce 3s ئاسانکاری؛ * --kf-bounce-لە: 200px؛ // بازدان لە بەرزی 200px */
@keyframes kf-bounce { 0% { وەرگێڕان: 0 calc (var (--kf-گەڕانەوە-لە، 100vh) * -1); }
34% { وەرگێڕان: 0 calc (var (--kf-گەڕانەوە-لە، 100vh) * -0.4); }
55% { وەرگێڕان: 0 calc (var (--kf-گەڕانەوە-لە، 100vh) * -0.2); }
72% { وەرگێڕان: 0 calc (var (--kf-گەڕانەوە-لە، 100vh) * -0.1); }
85% { وەرگێڕان: 0 calc (var (--kf-گەڕانەوە-لە، 100vh) * -0.05); }
94% { وەرگێڕان: 0 calc (var (--kf-گەڕانەوە-لە، 100vh) * -0.025); }
99% { وەرگێڕان: 0 calc (var (--kf-گەڕانەوە-لە، 100vh) * -0.0125); }
22%، 45%، 64%، 79%، 90%، 97%، 100% { وەرگێڕان: 0 0; ئەنیمەیشن-کات-کارایی: ئاسانکاری؛ } }
ئەنیمەیشنەکانی وەک “لاستیک” کەمێک فێڵاویترن بەهۆی حیساباتەکانی ناو کلیلفرێمەکانەوە. پێویستە --kf-elastic-from-X و --kf-elastic-from-Y بە جیا پێناسە بکەین (هەردووکیان ئیختیارین)، و پێکەوە ڕێگەمان پێدەدەن لە هەر خاڵێکی سەر شاشەکەوە دەروازەیەکی لاستیکی دروست بکەین.
/* * Elastic In - ئەنیمەیشنی چوونە ژوورەوەی لاستیکی * بەکارهێنانی --kf-elastic-from-X و --kf-elastic-from-Y بۆ کۆنترۆڵکردنی شوێنی دەستپێکردن * بە شێوەیەکی بنەڕەتی: لە ناوەندی سەرەوە دەچێتە ژوورەوە (0, -100vh) * بەکارهێنان: * ئەنیمەیشن: kf-elastic-in 2s ئاسانکاری-لە-دەرەوە هەردووکیان؛ * --kf-لاستیک-لە-X: -50px; * --kf-لاستیک-لە-Y: -200px; // لە (-50px, -200px)ەوە داخڵ بکە */
@keyframes kf-لاستیک-لە { 0% { وەرگێڕان: calc (var (--kf-لاستیک-لە-X، -50vw) * 1) calc (var (--kf-لاستیک-لە-Y، 0px) * 1); }
16% { وەرگێڕان: calc (var (--kf-لاستیک-لە-X، -50vw) * -0.3227) calc (var (--kf-لاستیک-لە-Y، 0px) * -0.3227); }
28% { وەرگێڕان: calc(var(--kf-لاستیک-لە-X، -50vw) * 0.1312)calc (var (--kf-لاستیک-لە-Y، 0px) * 0.1312); }
44% { وەرگێڕان: calc (var (--kf-لاستیک-لە-X، -50vw) * -0.0463) calc (var (--kf-لاستیک-لە-Y، 0px) * -0.0463); }
59% { وەرگێڕان: calc (var (--kf-لاستیک-لە-X، -50vw) * 0.0164) calc (var (--kf-لاستیک-لە-Y، 0px) * 0.0164); }
73% { وەرگێڕان: calc (var (--kf-لاستیک-لە-X، -50vw) * -0.0058) calc (var (--kf-لاستیک-لە-Y، 0px) * -0.0058); }
88% { وەرگێڕان: calc(var(--kf-لاستیک-لە-X، -50vw) * 0.0020) calc(var(--kf-لاستیک-لە-Y، 0px) * 0.0020); }
100% { وەرگێڕان: 0 0; } }
ئەم ڕێگایە ئاسانکاری دەکات بۆ دووبارە بەکارهێنانەوە و خۆکارکردنی چوارچێوەی سەرەکی پێشکەوتوو لە سەرانسەری پڕۆژەکەماندا، تەنها بە گۆڕینی یەک تایبەتمەندی تایبەتمەند.
.bounce-and-zoom { . ئەنیمەیشن: kf-bounce 3s ئاسانکاری، kf-zoom 3s هێڵی؛ --kf-zoom-لە: 0؛ }
.bounce-and-slide { . ئەنیمەیشنی-پێکهاتە: زیادکردن؛ /* هەردوو ئەنیمەیشنەکە وەرگێڕان بەکاردەهێنن */ ئەنیمەیشن: kf-bounce 3s ئاسانکاری، kf-slide-in 3s ئاسانکاری-دەرەوە؛ --kf-slide-لە: -200px؛ }
.لاستیک-لە { ئەنیمەیشن: kf-elastic-in 2s ئاسانکاری-لە-دەرەوە هەردووکیان؛ }
سەیری تۆکنەکانی قەڵەم Keyframes بکە - Demo 7 [forked] لەلایەن Amit Sheen. تا ئەم خاڵە، بینیومانە کە چۆن دەتوانین چوارچێوەی سەرەکی بە شێوەیەکی زیرەک و کارا چەسپێنین. بێگومان، ڕەنگە بتەوێت شتەکان تویک بکەیت بۆ ئەوەی باشتر لەگەڵ پێداویستییەکانی پڕۆژەکەتدا بگونجێت، بەڵام ئێمە نموونەی چەندین ئەنیمەیشنی باو و حاڵەتی بەکارهێنانی ڕۆژانەمان ڕووماڵ کردووە. وە لەگەڵ ئەم تۆکنانەی چوارچێوەی سەرەکی لە شوێنی خۆیان، ئێستا ئێمە بلۆکی بیناسازی بەهێزمان هەیە بۆ دروستکردنی ئەنیمەیشنی بەردەوام و پارێزگاریکردن لە سەرانسەری پڕۆژەکەدا. چیتر چوارچێوەی سەرەکی دووبارە نەماوە، چیتر ململانێی مەودای جیهانی نەماوە. تەنها ڕێگەیەکی پاک و گونجاوە بۆ مامەڵەکردن لەگەڵ هەموو پێداویستییە ئەنیمەیشنەکانمان. بەڵام پرسیارە ڕاستەقینەکە ئەوەیە: چۆن ئەم بلۆکە بیناسازییانە پێکەوە پێکەوە پێکبهێنین؟ دانانی هەمووی پێکەوە ئێمە بینیومانە کە تێکەڵکردنی تۆکنەکانی کیفڕایمە بنەڕەتییەکان سادەیە. ئێمە پێویستمان بە شتێکی تایبەت نییە جگە لە پێناسەکردنی ئەنیمەیشنی یەکەم، پێناسەکردنی دووەم، دانانی گۆڕاوەکان بەپێی پێویست و تەواو. /* کاڵبوونەوە لە + سلاید لە */ .تۆست { ئەنیمەیشن: kf-fade-in 0.4s، kf-slide-in 0.4s سێجا-بێزیەر (0.34، 1.56، 0.64، 1); --kf-slide-لە: 0 40px؛ }
/* زووم ئین + کاڵبوونەوە */ .مۆداڵ { ئەنیمەیشن: kf-fade-in 0.3s، kf-zoom 0.3s سێجا-بێزیەر (0.34، 1.56، 0.64، 1); --kf-zoom-from: 0.7؛ --kf-zoom-to: 1؛ }
/* خلیسکێنە ناو + پەلسی */ .ئاگادارکردنەوە { ئەنیمەیشن: kf-slide-in 0.5s، kf-pulse 1.2s ئاسانکاری لە دەرەوە بێکۆتایی جێگرەوە؛ --kf-slide-لە: -100px 0؛ --kf-pulse-scale-لە: 0.95؛ --kf-pulse-scale-to: 1.05؛ }
ئەم پێکەوەگرتنانە بە جوانی کاردەکەن چونکە هەر ئەنیمەیشنێک تایبەتمەندییەکی جیاواز دەکاتە ئامانج: ناڕوونی، گۆڕینی (وەرگێڕان/پێوەر)، هتد.. بەڵام هەندێک جار ناکۆکی هەیە، و پێویستە بزانین بۆچی و چۆن مامەڵەیان لەگەڵدا بکەین. کاتێک دوو ئەنیمەیشن هەوڵدەدەن هەمان تایبەتمەندی ئەنیمەیشن بکەن — بۆ نموونە هەردوو ئەنیمەیشنکردنی پێوەر یان هەردووکیان ئەنیمەیشنکردنی ناڕوونی — ئەنجامەکە ئەوە نابێت کە چاوەڕێی دەکەیت. بە شێوەیەکی بنەڕەتی تەنها یەکێک لە ئەنیمەیشنەکان لە ڕاستیدا بۆ ئەو تایبەتمەندییە جێبەجێ دەکرێت کە دوا تایبەتمەندییە لە لیستی ئەنیمەیشنەکاندا. ئەمە سنووردارکردنی چۆنیەتی مامەڵەکردنی CSS لەگەڵ چەندین ئەنیمەیشن لەسەر هەمان تایبەتمەندی. بۆ نموونە ئەمە وەک مەبەست کارناکات چونکە تەنها ئەنیمەیشنی kf-pulse جێبەجێ دەکرێت. .bad-combo { ئەنیمەیشن: kf-zoom 0.5s بۆ پێشەوە، kf-pulse 1.2s جێگرەوەی بێکۆتایی؛ --kf-zoom-from: 0.5؛ --kf-zoom-to: 1.2؛ --kf-pulse-scale-لە: 0.8؛ --kf-pulse-scale-to: 1.1؛ }
زیادکردنی ئەنیمەیشن سادەترین و ڕاستەوخۆترین ڕێگا بۆ مامەڵەکردن لەگەڵ چەندین ئەنیمەیشن کە کاریگەرییان لەسەر هەمان تایبەتمەندی هەیە، بەکارهێنانی تایبەتمەندی ئەنیمەیشن-پێکهاتە. لە دوا نموونەی سەرەوەدا ئەنیمەیشنی kf-pulse جێگەی ئەنیمەیشنی kf-zoom دەگرێتەوە، بۆیە زوومی سەرەتایی نابینین و قەبارەی چاوەڕوانکراو بۆ 1.2 بەدەست ناهێنین. بە ڕێکخستنی ئەنیمەیشن-پێکهاتە بۆ زیادکردن، بە وێبگەڕەکە دەڵێین هەردوو ئەنیمەیشنەکە کۆبکاتەوە. ئەمەش ئەو ئەنجامەمان پێدەبەخشێت کە دەمانەوێت. .پێکهاتە-دوو { ئەنیمەیشنی-پێکهاتە: زیادکردن؛ }
سەیری تۆکنەکانی قەڵەم Keyframes بکە - Demo 8 [forked] لەلایەن Amit Sheen. ئەم ڕێبازە بۆ زۆربەی حاڵەتەکان بە باشی کاردەکات کە دەمانەوێت کاریگەرییەکان لەسەر هەمان تایبەتمەندی کۆبکەینەوە. هەروەها کاتێک کە پێویستمان بە تێکەڵکردنی ئەنیمەیشنەکانە لەگەڵ بەهاکانی تایبەتمەندی ئیستاتیک بەسوودە. بۆ نموونە ئەگەر توخمێکمان هەبێت کە تایبەتمەندی وەرگێڕان بەکاربهێنێت بۆ ئەوەی بە تەواوی لەو شوێنەدا دابنێین کە دەمانەوێت، و دواتر بمانەوێت بە kf-slide-in keyframes ئەنیمەیشنی بکەین، ئەوا بازدانێکی ناشرین و ناشرینمان دەستدەکەوێت بەبێ ئەنیمەیشن-پێکهاتە. سەیری تۆکنەکانی قەڵەم Keyframes بکە - Demo 9 [forked] لەلایەن Amit Sheen. لەگەڵ ئەنیمەیشن-پێکهاتە کە دانراوە بۆ زیادکردن، ئەنیمەیشنەکە بە شێوەیەکی ڕێک و پێک لەگەڵ هەبووەکەدا تێکەڵ دەکرێتدەگۆڕێت، بۆیە توخمەکە لە شوێنی خۆی دەمێنێتەوە و وەک چاوەڕوان دەکرا زیندوو دەبێتەوە. ئەنیمەیشنی ستاگەر ڕێگەیەکی دیکەی مامەڵەکردن لەگەڵ چەندین ئەنیمەیشن بریتییە لە "چەقۆکێشان"یان — واتە کەمێک دوای تەواوبوونی ئەنیمەیشنی دووەم دەست بە ئەنیمەیشنی دووەم بکە. چارەسەرێک نییە کە بۆ هەموو حاڵەتێک کار بکات، بەڵام کاتێک بەسوودە کە ئەنیمەیشنی چوونە ژوورەوەمان هەبێت و دواتر ئەنیمەیشنی بەردەواممان هەبێت. /* کاڵبوونەوە لە + پەلسی ناڕوونی */ .ئاگادارکردنەوە { ئەنیمەیشن: kf-fade-in 2s ئاسانکاری، kf-pulse 0.5s 2s ئاسانکاری لە دەرەوە بێکۆتایی جێگرەوە؛ --kf-پەلسی-ناڕوونی-بۆ: 0.5؛ }
سەیری تۆکنەکانی قەڵەم Keyframes بکە - Demo 10 [forked] لەلایەن Amit Sheen. بابەتی داواکاری بەشێکی زۆر لەو ئەنیمەیشنانەی کە ئێمە کاریان لەگەڵ دەکەین تایبەتمەندی transform بەکاردەهێنن. لە زۆربەی حاڵەتەکاندا ئەمە بە سادەیی گونجاوترە. هەروەها سوودێکی کارایی هەیە چونکە ئەنیمەیشنی گۆڕینی دەتوانرێت بە GPU خێراتر بکرێت. بەڵام ئەگەر گۆڕانکارییەکان بەکاربهێنین، پێویستە قبوڵ بکەین کە ئەو ڕێزبەندییەی کە گۆڕانکارییەکانمان تێیدا ئەنجام دەدەین گرنگە. زۆر. لە چوارچێوەی سەرەکییەکانماندا تا ئێستا، ئێمە گۆڕینی تاکەکەسیمان بەکارهێناوە. بەپێی تایبەتمەندییەکان، ئەمانە هەمیشە بە ڕێکوپێکییەکی جێگیر جێبەجێ دەکرێن: سەرەتا توخمەکە وەرگێڕان وەردەگرێت، پاشان دەسوڕێتەوە، پاشان پێوانە دەکات. ئەمەش مانای هەیە و زۆربەمان چاوەڕێی ئەوە دەکات. بەڵام ئەگەر تایبەتمەندی transform بەکاربهێنین، ئەوا ئەو ڕێزبەندییەی کە فەنکشنەکان بە پێی نووسراون، ئەو ڕیزبەندییەیە کە بەو ڕێزەی جێبەجێ دەکرێن. لەم حاڵەتەدا ئەگەر شتێک بە ١٠٠ پێکسڵ لەسەر میحوەر ئێکس بجوڵێنین و دواتر بە ٤٥ پلە بیسوڕێنینەوە، ئەوە هەمان شت نییە کە سەرەتا بە ٤٥ پلە بیسوڕێنینەوە و دواتر ١٠٠ پێکسڵ بیجوڵێنین. /* چوارگۆشەی پەمەیی: سەرەتا وەرگێڕان، پاشان سوڕانەوە */ .نموونە-یەک { گۆڕینی: وەرگێڕانX (100px) سوڕانەوە (45deg); }
/* چوارگۆشەی سەوز: سەرەتا بیسوڕێنە، پاشان وەرگێڕان */ .نموونە-دوو { گۆڕینی: سوڕانەوە (45deg) وەرگێڕانX (100px); }
سەیری تۆکنەکانی قەڵەم Keyframes بکە - دیمۆ 11 [forked] لەلایەن Amit Sheen. بەڵام بەپێی ڕێزبەندی گۆڕانکاری، هەموو گۆڕانکارییە تاکەکەسییەکان — هەموو ئەو شتانەی کە بۆ تۆکنەکانی چوارچێوەی کلیل بەکاریان هێناوە — پێش ئەرکەکانی گۆڕانکاری ڕوودەدەن. واتە هەر شتێک کە لە تایبەتمەندی transform دا دابنێیت دوای ئەنیمەیشنەکان ڕوودەدات. بەڵام ئەگەر بۆ نموونە وەرگێڕان لەگەڵ kf-spin keyframes دابنێیت، وەرگێڕانەکە پێش ئەنیمەیشنەکە ڕوودەدات. هێشتا سەرت لێ شێواوە؟! ئەمەش دەبێتە هۆی ئەو دۆخەی کە بەها ئیستاتیکییەکان دەتوانن ببنە هۆی ئەنجامە جیاوازەکان بۆ هەمان ئەنیمەیشن، وەک لەم حاڵەتەی خوارەوەدا:
/* ئەنیمەیشنی باو بۆ هەردوو سپینەرەکە */ .سپینەر { ئەنیمەیشن: kf-spin 1s هێڵی بێکۆتایی؛ }
/* سپینەری پەمەیی: وەرگێڕان پێش سوڕانەوە (گۆڕینی تاکەکەسی) */ .سپینەر-پەمەیی { وەرگێڕان: 100% 50%؛ }
/* سپینەری سەوز: سوڕانەوە پاشان وەرگێڕان (ڕیزبەندی کارەکان) */ .سپینەر-سەوز { گۆڕینی: وەرگێڕان(100%، 50%)؛ }
سەیری تۆکنەکانی قەڵەم Keyframes بکە - دیمۆ 12 [forked] لەلایەن Amit Sheen. دەتوانن بزانن کە یەکەم خولێنەر (پەمەیی) وەرگێڕانێک بەدەست دەهێنێت کە پێش خولانەوەی kf-spin ڕوودەدات، بۆیە سەرەتا دەچێتە شوێنی خۆی و دواتر دەخولێتەوە. دووەم خولێنەر (سەوز) فەنکشنێکی translate() بەدەست دەهێنێت کە دوای گۆڕینی تاکەکەسی ڕوودەدات، بۆیە توخمەکە سەرەتا دەخولێتەوە، پاشان دەجووڵێت بە بەراورد بە گۆشەی ئێستای، و ئێمە ئەو کاریگەرییە خولگەی فراوانەمان دەستدەکەوێت. نەخێر ئەمە هەڵە نییە. تەنها یەکێکە لەو شتانەی کە پێویستە دەربارەی CSS بزانین و لەبەرچاوی بگرین لەکاتی کارکردن لەگەڵ چەندین ئەنیمەیشن یان چەندین گۆڕانکاری. ئەگەر پێویست بوو، دەتوانیت کۆمەڵەیەکی زیادە لە چوارچێوەی کلیلی kf-spin-alt دروست بکەیت کە توخمەکان دەسوڕێنەوە بە بەکارهێنانی فەنکشنی rotate(). کەمبوونەوەی جوڵە وە لە کاتێکدا باس لە چوارچێوەی کلیلی بەدیل دەکەین، ناتوانین بژاردەی “بێ ئەنیمەیشن” پشتگوێ بخەین. یەکێک لە گەورەترین سوودەکانی بەکارهێنانی تۆکنەکانی کیفڕایم ئەوەیە کە دەتوانرێت دەستڕاگەیشتن لەناودا بکوڵێنرێت، و لە ڕاستیدا ئەنجامدانی زۆر ئاسانە. بە دیزاینکردنی چوارچێوەی سەرەکیمان بە لەبەرچاوگرتنی دەستڕاگەیشتن، دەتوانین دڵنیا بین لەوەی کە ئەو بەکارهێنەرانەی کە جوڵەی کەمکردنەوەیان پێ باشترە ئەزموونێکی نەرمتر و کەمتر سەرقاڵکەر بەدەست دەهێنن، بەبێ کاری زیادە یان دووبارەکردنەوەی کۆد. مانای وردی “Reduced Motion” دەتوانێت کەمێک لە ئەنیمەیشنێکەوە بۆ ئەنیمەیشنێکی تر بگۆڕێت، و لە پرۆژەیەکەوە بۆ پڕۆژەیەکی تر، بەڵام لێرەدا چەند خاڵێکی گرنگ دەخەینەڕوو کە دەبێت لەبەرچاو بگیرێن: بێدەنگکردنی Keyframes لە کاتێکدا دەتوانرێت هەندێک ئەنیمەیشن نەرم بکرێتەوە یان خاو بکرێتەوە، هەندێکی تریش هەن کە پێویستە بە تەواوی نەمێنن کاتێک داوای جووڵەی کەم بکرێتەوە. ئەنیمەیشنی پەلسی نموونەیەکی باشە. بۆ ئەوەی دڵنیا بین لەوەی ئەم ئەنیمەیشنانە لە دۆخی جووڵەی کەمکراوەدا کارناکەن، دەتوانین بە سادەیی لە پرسیاری میدیای گونجاودا بیانپێچینەوە.
@media (پێشتر-کەمکراوە-جووڵە: بێ-پێویستە) { @keyfrmaes kf-پلس { لە { پێوەر: var (--kf-پەلسی-پێوەر-لە، 1); ناڕوونی: var(--kf-پەلسی-ناڕوونی-لە، 1); } بۆ { پێوەر: var(--kf-پەلسی-پێوەر-بۆ، 1); ناڕوونی: ناڕوونی:var(--kf-پەلسی-ناڕوونی-بۆ، 1); } } }
ئەمەش دڵنیای دەدات لەوەی کە ئەو بەکارهێنەرانەی کە prefers-reduced-motion یان داناوە بۆ کەمکردنەوە ئەنیمەیشنەکە نابینن و ئەزموونێک بەدەست دەهێنن کە لەگەڵ ئارەزووەکانیان بگونجێت. ئینستێنت ئین هەندێک چوارچێوەی سەرەکی هەن کە ناتوانین بە سادەیی لایان ببەین، وەک ئەنیمەیشنی چوونە ژوورەوە. بەهاکە دەبێت بگۆڕێت، دەبێت زیندوو بێت؛ ئەگەرنا، توخمەکە بەها دروستەکانی نابێت. بەڵام لە جووڵەی کەمکراوەدا، ئەم گواستنەوەیە لە بەهای سەرەتاییەوە دەبێت خێرا بێت. بۆ بەدەستهێنانی ئەمە، ئێمە کۆمەڵەیەکی زیادەی چوارچێوەی سەرەکی پێناسە دەکەین کە بەهاکە یەکسەر باز دەدات بۆ دۆخی کۆتایی. ئەمانە دەبنە چوارچێوەی سەرەکی پێشوەختەمان. پاشان، ئێمە چوارچێوەی کلیلی ئاسایی لەناو پرسیارێکی میدیادا زیاد دەکەین بۆ جووڵەی پەسەندکردن-کەمکراوە کە لەسەر بێ پەسەندکردن دانراوە، هەروەک لە نموونەی پێشوودا. /* دەستبەجێ پۆپ ئین بکە بۆ کەمکردنەوەی جوڵە */ @keyframes kf-زووم { لە، بۆ { پێوەر: var(--kf-زووم-بۆ، 1); } }
@media (پێشتر-کەمکراوە-جووڵە: بێ-پێویستە) { /* چوارچێوەی کلیلی زووم ئەسڵی */ @keyframes kf-زووم { لە { پێوەر: var (--kf-زووم-لە، 0.8); } بۆ { پێوەر: var(--kf-زووم-بۆ، 1); } } }
بەم شێوەیە ئەو بەکارهێنەرانەی کە جوڵەی کەمکردنەوەیان پێ باشترە، دەبینن کە توخمەکە دەستبەجێ لە دۆخی کۆتاییدا دەردەکەوێت، لە کاتێکدا هەموو کەسێکی تر گواستنەوەی ئەنیمەیشن بەدەست دەهێنن. ڕێبازی نەرم حاڵەت هەیە کە ئێمە دەمانەوێت هەندێک جوڵە بهێڵینەوە، بەڵام زۆر نەرمتر و ئارامترە لە ئەنیمەیشنی ڕەسەن. بۆ نموونە دەتوانین دەرگای چوونە ژوورەوەی وەرگەڕان بە کاڵبوونەوەی نەرم بگۆڕین.
@keyframes kf-bounce { /* کاڵبوونەوەی نەرم بۆ کەمکردنەوەی جوڵە */ }
@media (پێشتر-کەمکراوە-جووڵە: بێ-پێویستە) { @keyframes kf-bounce { /* کلیلفڕێمەکانی وەرگەڕانی ئەسڵی */ } }
ئێستا، ئەو بەکارهێنەرانەی کە جووڵەی کەمکراوەیان چالاک کراوە هێشتا هەست بە دەرکەوتن دەکەن، بەڵام بەبێ جوڵەی چڕ و پڕی وەرگەڕان یان ئەنیمەیشنی لاستیکی. بە بوونی بلۆکی بیناسازی لە شوێنی خۆیان، پرسیاری داهاتوو ئەوەیە کە چۆن بیانکەینە بەشێک لە کاری ڕاستەقینە. نووسینی چوارچێوەی سەرەکی نەرم و نیان شتێکە، بەڵام کردنی بە جێی متمانە لە سەرانسەری پڕۆژەیەکی گەورەدا پێویستی بە چەند ستراتیژییەک هەیە کە دەبوو بە ڕێگای سەخت فێری بم. ستراتیژییەکانی جێبەجێکردن و باشترین پراکتیزەکان کاتێک کتێبخانەیەکی تۆکمەمان هەبوو لە تۆکنەکانی کیفڕێم، تەحەدای ڕاستەقینە ئەوەیە کە چۆن بیانهێنینە ناو کاری ڕۆژانە.
وەسوەسە ئەوەیە کە هەموو کیفڕێمەکان بە یەکجار بخەیتە ناوەوە و کێشەکە چارەسەرکراو ڕابگەیەنیت، بەڵام بە کردەوە بۆم دەرکەوتووە کە باشترین ئەنجامەکان لە وەرگرتنی وردە وردە دێت. لە باوترین ئەنیمەیشنەکانەوە دەست پێ بکە، وەکو fade یان slide. ئەمانە سەرکەوتنی ئاسانن کە بەهای دەستبەجێ نیشان دەدەن بەبێ ئەوەی پێویستیان بە دووبارە نووسینەوەی گەورە هەبێت. ناونانی خاڵێکی ترە کە شایەنی سەرنجە. پێشگرێکی یەکگرتوو یان ناوچەی ناوەکان ئەوە ڕوون دەکاتەوە کە کام ئەنیمەیشنەکان تۆکنن و کامیان یەکجارەکی ناوخۆیین. هەروەها ڕێگری دەکات لە پێکدادانی بەڕێکەوت و یارمەتی ئەندامانی تیمی نوێ دەدات لە چاوپێکەوتنێکدا سیستەمی هاوبەش بناسنەوە. بەڵگەنامەسازی بەقەد خودی کۆدەکە گرنگە. تەنانەت کۆمێنتێکی کورت لە سەرووی هەر تۆکنێکی keyframes دەتوانێت چەند کاتژمێرێک لە پێشبینیکردن دواتر پاشەکەوت بکات. گەشەپێدەرێک دەبێت بتوانێت فایلە تۆکنەکان بکاتەوە، سکان بکات بۆ ئەو کاریگەرییەی کە پێویستیانە و شێوازی بەکارهێنانەکە ڕاستەوخۆ کۆپی بکات بۆ ناو پێکهاتەکەیان. نەرمی و نەرمی ئەوەیە کە ئەم ڕێبازە شایەنی هەوڵدان بێت. بە ئاشکراکردنی تایبەتمەندییە تایبەتمەندە عەقڵانییەکان، ئێمە شوێن دەدەین بە تیمەکان بۆ گونجاندنی ئەنیمەیشنەکە بەبێ ئەوەی سیستەمەکە بشکێنن. لە هەمان کاتدا هەوڵبدە زۆر ئاڵۆز نەکەیت. ئەو دەستکێشانە دابین بکە کە گرنگن و ئەوانی دیکەش بە بۆچوونەکان بهێڵەرەوە. لە کۆتاییدا، دەستڕاگەیشتن لەبیرت بێت. هەموو ئەنیمەیشنێک پێویستی بە بەدیلێکی جووڵەی کەمکراوە نییە، بەڵام زۆرێک پێویستی بە بەدیلێکی جووڵە کەمکراوە. نانکردن لەم ڕێکخستنانەدا زوو واتە هەرگیز نابێت دواتر ڕیترۆفیتیان بکەین، وە ئاستێکی چاودێری نیشان دەدات کە بەکارهێنەرانمان هەستی پێدەکەن تەنانەت ئەگەر هەرگیز باسی نەکەن.
بە ئەزموونی من، مامەڵەکردن لەگەڵ تۆکنەکانی کیفڕایمەکان وەک بەشێک لە کاری ڕەوتی کاری تۆکنەکانی دیزاینمان ئەوەیە کە وایان لێدەکات بچەسپێن. کاتێک لە شوێنی خۆیان بوون، واز لە هەستکردن بە کاریگەرییە تایبەتەکان دێنن و دەبنە بەشێک لە زمانی دیزاین، کە درێژکراوەیەکی سروشتییە بۆ چۆنیەتی جوڵە و وەڵامدانەوەی بەرهەمەکە. پێچانەوە ئەنیمەیشن دەتوانێت یەکێک بێت لە خۆشترین بەشەکانی دروستکردنی ڕووکارەکان، بەڵام بەبێ پێکهاتە، دەتوانێت ببێتە یەکێک لە گەورەترین سەرچاوەکانی بێزاری. بە مامەڵەکردن لەگەڵ کلیلفرێمەکان وەک تۆکن، شتێک دەگریت کە بەزۆری ناڕێک و بەڕێوەبردنی قورسە و دەیکەیتە سیستەمێکی ڕوون و پێشبینیکراو. بەهای ڕاستەقینە تەنها لە پاشەکەوتکردنی چەند دێڕێکی کۆددا نییە. ئەوە لە متمانەدایە کە کاتێک فەید، سلاید، زووم، یان خولاندنەوە بەکاردەهێنیت، بە تەواوی دەزانیت کە چۆن هەڵسوکەوت دەکات لە سەرانسەری پڕۆژەکەدا. لە نەرمی و نەرمیدایە کە لە تایبەتمەندییە تایبەتمەندەکانەوە دێت بەبێ ئاژاوەی گۆڕانکارییە بێکۆتاکان. وە لە دەستگەیشتندایە کە لەناو بناغەکەدا دروستکراوە نەک وەک زیاد بکرێتبیرکردنەوەیەکی پاشکۆ. من بینیومە ئەم بیرۆکانە لە تیمی جیاواز و بنکەی کۆدی جیاوازدا کاردەکەن و هەمیشە نەخشەکە وەک یەکە. کاتێک تۆکنەکان لە شوێنی خۆیان بوون، کلیلفرێمەکان واز لە کۆمەڵەیەکی پەرش و بڵاوی فێڵەکان دێنن و دەبنە بەشێک لە زمانی دیزاین. ئەوان وا دەکەن بەرهەمەکە هەست بە مەبەستدارتر و یەکگرتووتر و زیندووتر بکات. ئەگەر شتێک لەم بابەتە وەربگریت، با ئەمە بێت: ئەنیمەیشنەکان شایەنی هەمان چاودێری و پێکهاتەن کە پێشتر بە ڕەنگ و تایپۆگرافی و دووری دەدەین. وەبەرهێنانێکی بچووک لە تۆکنەکانی keyframes هەر جارێک ڕووکارەکەت دەجووڵێت سوودی دەبێت.
