בילד דעם: איר פאַרבינדן אַ נייַע פּרויעקט, ונטערטוקנ זיך אין די קאָדעבאַסע, און אין דער ערשטער ביסל שעה, איר אַנטדעקן עפּעס פראַסטרייטינגלי באַקאַנט. צעוואָרפן איבער די סטיילז, איר געפֿינען קייפל @קייפראַמעס זוך פֿאַר די זעלבע יקערדיק אַנאַמיישאַנז. דריי פאַרשידענע וועלקן-אין יפעקץ, צוויי אָדער דריי רוק ווערייישאַנז, אַ האַנדפול פון פארגרעסער אַנאַמיישאַנז און לפּחות צוויי פאַרשידענע ומדריי אַנאַמיישאַנז ווייַל, נו, פארוואס נישט? @קייפראַמעס דויפעק { פון { וואָג: 1; } צו { וואָג: 1.1; } }
@keyframes ביגער-pulse { 0%, 20%, 100% { וואָג: 1; } 10%, 40% { וואָג: 1.2; } }
אויב דעם סצענאַר סאָונדס באַקאַנט, איר ניטאָ אַליין. אין מיין דערפאַרונג אין פאַרשידן פּראַדזשעקס, איינער פון די מערסט קאָנסיסטענט שנעל ווינס איך קענען צושטעלן איז קאַנסאַלאַדייטינג און סטאַנדערדייזינג קייפראַמעס. עס איז געווארן אַזאַ אַ פאַרלאָזלעך מוסטער אַז איך איצט קוק פאָרויס צו דעם קלינאַפּ ווי איינער פון מיין ערשטער טאַסקס אויף קיין נייַע קאָד. די לאָגיק הינטער די כאַאָס די יבעריקייַט מאכט גאנץ זינען ווען איר טראַכטן וועגן אים. מיר אַלע נוצן די זעלבע פונדאַמענטאַל אַנאַמיישאַנז אין אונדזער טאָג-צו-טאָג אַרבעט: פיידז, סליידז, זומז, ספּינז און אנדערע פּראָסט יפעקץ. די אַנאַמיישאַנז זענען שיין סטרייטפאָרווערד, און עס איז גרינג צו מאַכן אַ שנעל דעפֿיניציע פון @קייפראַמעס צו באַקומען די אַרבעט. אָן אַ סענטראַלייזד אַנאַמיישאַן סיסטעם, דעוועלאָפּערס געוויינטלעך שרייַבן די קייפראַמעס פֿון קראַצן, ניט וויסנדיק אַז ענלעך אַנאַמיישאַנז שוין עקסיסטירן אנדערש אין די קאָדעבאַסע. דאָס איז ספּעציעל פּראָסט ווען ארבעטן אין קאָמפּאָנענט-באזירט אַרקאַטעקטשערז (וואָס רובֿ פון אונדז טאָן די טעג), ווייַל טימז אָפט אַרבעט פּאַראַלעל אין פאַרשידענע פּאַרץ פון די אַפּלאַקיישאַן. דער רעזולטאַט? אַנאַמיישאַן כאַאָס. די קליין פּראָבלעם די מערסט קלאָר ווי דער טאָג ישוז מיט קייפראַמעס דופּליקאַטיאָן זענען ווייסטאַד אַנטוויקלונג צייט און ומנייטיק קאָד בלאָוטינג. קייפל קייפראַמע דעפֿיניציעס מיינען קייפל ערטער צו דערהייַנטיקן ווען רעקווירעמענץ טוישן. איר דאַרפֿן צו סטרויערן די טיימינג פון דיין וועלקן אַנאַמיישאַן? איר וועט דאַרפֿן צו גיינ אַף אַראָפּ יעדער בייַשפּיל אַריבער דיין קאָדבאַסע. ווילן צו סטאַנדערדייז יזינג פאַנגקשאַנז? גוט גליק צו געפֿינען אַלע די ווערייישאַנז. דעם קייפל פון וישאַלט פונקטן מאכט אפילו פּשוט אַנאַמיישאַן דערהייַנטיקונגען אַ צייט-קאַנסומינג אַרבעט. די גרעסערע פּראָבלעם די קייפראַמעס דופּליקיישאַן קריייץ אַ פיל מער ינסידיאַס פּראָבלעם לערקינג אונטער די ייבערפלאַך: די גלאבאלע פאַרנעם טראַפּ. אפילו ווען ארבעטן מיט קאָמפּאָנענט-באזירט אַרקאַטעקטשערז, CSS קיפראַמעס זענען שטענדיק דיפיינד אין די גלאבאלע פאַרנעם. דעם מיטל אַז אַלע קייפראַמעס אַפּלייז צו אַלע קאַמפּאָונאַנץ. שטענדיק. יאָ, דיין אַנאַמיישאַן טוט נישט דאַווקע נוצן די קייפראַמעס איר דיפיינד אין דיין קאָמפּאָנענט. עס ניצט די לעצטע קייפראַמעס וואָס גלייַכן די פּינטלעך זעלביקער נאָמען וואָס זענען לאָודיד אין די גלאבאלע פאַרנעם. ווי לאַנג ווי אַלע דיין קייפראַמעס זענען יידעניקאַל, דאָס קען ויסקומען ווי אַ מינערווערטיק פּראָבלעם. אָבער דער מאָמענט איר ווילן צו קאַסטאַמייז אַן אַנאַמיישאַן פֿאַר אַ ספּעציפיש נוצן פאַל, איר זענט אין קאָנפליקט, אָדער ערגער, איר וועט זיין דער וואָס פאַרשאַפן זיי. אָדער דיין אַנאַמיישאַן וועט נישט אַרבעטן ווייַל אן אנדער קאָמפּאָנענט לאָודיד נאָך דייַן, אָווועררייטינג דיין קייפראַמעס, אָדער דיין קאָמפּאָנענט לאָודז לעצטע און אַקסאַדענאַלי ענדערונגען די אַנאַמיישאַן נאַטור פֿאַר יעדער אנדערע קאָמפּאָנענט ניצן דעם קייפאַמע ס נאָמען, און איר קען נישט אפילו פאַרשטיין עס. דאָ איז אַ פּשוט בייַשפּיל וואָס דעמאַנסטרייץ דעם פּראָבלעם: .קאָמפּאָנענט-איינער { /* קאָמפּאָנענט סטיילז */ אַנאַמיישאַן: דויפעק 1 ס יז-אין-אויס ינפאַנאַט בייַטנ לויט דער ריי; }
/* דעם @קייפראַמעס דעפֿיניציע וועט נישט אַרבעטן */ @קייפראַמעס דויפעק { פון { וואָג: 1; } צו { וואָג: 1.1; } }
/* שפּעטער אין די קאָד... */
.קאָמפּאָנענט-צוויי { /* קאָמפּאָנענט סטיילז */ אַנאַמיישאַן: דויפעק 1 ס יז-אין-אויס ינפאַנאַט; }
/* דעם קייפראַמעס וועט צולייגן צו ביידע קאַמפּאָונאַנץ */ @קייפראַמעס דויפעק { 0%, 20%, 100% { וואָג: 1; } 10%, 40% { וואָג: 1.2; } }
ביידע קאַמפּאָונאַנץ נוצן די זעלבע אַנאַמיישאַן נאָמען, אָבער די רגע @קייפראַמעס דעפֿיניציע אָווועררייט דער ערשטער. איצט ביידע קאָמפּאָנענט-איינער און קאָמפּאָנענט-צוויי וועט נוצן די רגע קייפראַמעס, ראַגאַרדלאַס פון וואָס קאָמפּאָנענט דיפיינד וואָס קייפראַמעס. זען די פּען קיפראַמעס טאָקענס - דעמאָ 1 [פאָרקעד] דורך Amit Sheen. די ערגסטע טייל? דאָס אַרבעט אָפט בישליימעס אין היגע אַנטוויקלונג אָבער ברייקס מיסטעריעז אין פּראָדוקציע ווען בויען פּראַסעסאַז טוישן די לאָודינג סדר פון דיין סטיילז. איר סוף אַרויף מיט אַנאַמיישאַנז וואָס ביכייוו דיפערענטלי דיפּענדינג אויף וואָס קאַמפּאָונאַנץ זענען לאָודיד און אין וואָס סיקוואַנס. די לייזונג: יונאַפייד קייפראַמעס דער ענטפער צו דעם כאַאָס איז סאַפּרייזינגלי פּשוט: פּרעדעפינעד דינאַמיש קייפראַמעס סטאָרד אין אַ שערד סטילעשעעט. אַנשטאָט לאָזן יעדער קאָמפּאָנענט דעפינירן זיין אייגענע אַנאַמיישאַנז, מיר שאַפֿן סענטראַלייזד קייפראַמעס וואָס זענען געזונט-דאַקיאַמענטאַד, גרינג צונוצן, מאַינטאַינאַבאַל און טיילערד צו די ספּעציפיש באדערפענישן פון דיין פּרויעקט. טראַכטן פון עס ווי קייפראַמעס טאָקענס. פּונקט ווי מיר נוצן טאָקענס פֿאַר פארבן און ספּייסינג, און פילע פון אונדז שוין נוצן טאָקענס פֿאַר אַנאַמיישאַן פּראָפּערטיעס, ווי געדויער און יזינג פאַנגקשאַנז, פארוואס טאָן ניט נוצן טאָקענס אויך פֿאַר קיפראַמעס? דער צוגאַנג קענען ינטאַגרייטיד געוויינטלעך מיט קיין קראַנט פּלאַן סימען וואָרקפלאָוו איר נוצן, בשעת סאַלווינג ביידע די קליין פּראָבלעם (קאָד דופּליקיישאַן) און די ביגער פּראָבלעם (גלאבאלע פאַרנעם קאנפליקטן) אין איין גיין. דער געדאַנק איז פּשוט: שאַפֿן אַ איין מקור פון אמת פֿאַר אַלע אונדזער פּראָסט אַנאַמיישאַנז. דעם שערד סטילעשעעט כּולל קערפאַלי קראַפטעד קיפראַמעס וואָס דעקן די אַנאַמיישאַן פּאַטערנז וואָס אונדזער פּרויעקט אַקשלי ניצט. ניט מער געסינג צי אַ וועלקן אַנאַמיישאַן שוין יגזיסץ ערגעץ אין אונדזער קאָדעבאַסע. ניט מער אַקסאַדענאַלי אָווועררייטינג אַנאַמיישאַנז פון אנדערע קאַמפּאָונאַנץ. אָבער דאָ איז דער שליסל: דאָס זענען נישט בלויז סטאַטיק קאָפּיע-פּאַפּ אַנאַמיישאַנז. זיי זענען דיזיינד צו זיין דינאַמיש און קוסטאָמיזאַבלע דורך CSS מנהג פּראָפּערטיעס, אַלאַוינג אונדז צו האַלטן קאָנסיסטענסי און נאָך האָבן די בייגיקייט צו אַדאַפּט אַנאַמיישאַנז צו ספּעציפיש נוצן קאַסעס, ווי אויב איר דאַרפֿן אַ ביסל גרעסערע "דויפעק" אַנאַמיישאַן אין איין אָרט. בילדינג דער ערשטער קייפראַמעס טאָקען איינער פון די ערשטער נידעריק-כאַנגגינג פירות מיר זאָל מאַכנ זיך איז די "וועלקן-אין" אַנאַמיישאַן. אין איינער פון מיין לעצטע פּראַדזשעקס, איך געפֿונען איבער אַ טוץ באַזונדער וועלקן-אין זוך, און יאָ, זיי אַלע פשוט אַנימאַטעד די אָופּאַסאַטי פון 0 צו 1. אַזוי, לאָזן אונדז מאַכן אַ נייַע סטילשעעט, רופן עס kf-tokens.css, אַרייַנפיר עס אין אונדזער פּרויעקט און שטעלן אונדזער קייפראַמעס מיט געהעריק באַמערקונגען אין עס. /* keyframes-tokens.css */
/* * וועלקן אין - וועלקן אַרייַנגאַנג אַנאַמיישאַן * באַניץ: אַנאַמיישאַן: kf-fade-in 0.3s יז-אויס; */ @keyframes kf-fade-in { פון { אָופּאַסאַטי: 0; } צו { אָופּאַסאַטי: 1; } }
די איין @קייפראַמעס דעקלאַראַציע ריפּלייסיז אַלע די צעוואָרפן וועלקן-אין אַנאַמיישאַנז אַריבער אונדזער קאָדעבאַסע. ריין, פּשוט און גלאָובאַלי אָנווענדלעך. און איצט אַז מיר האָבן דעם סימען דיפיינד, מיר קענען נוצן עס פֿון קיין קאָמפּאָנענט אין אונדזער פּרויעקט: .modal { אַנאַמיישאַן: kf-fade-in 0.3s יז-אויס; }
.מכשירטיפּ { אַנאַמיישאַן: kf-fade-in 0.2s יז-אין-out; }
.notification { אַנאַמיישאַן: kf-fade-in 0.5s יז-אויס; }
זען די פּען קיפראַמעס טאָקענס - דעמאָ 2 [פאָרקעד] דורך Amit Sheen. באַמערקונג: מיר נוצן אַ kf- פּרעפיקס אין אַלע אונדזער @קייפראַמעס נעמען. דער פּרעפיקס סערוועס ווי אַ נאַמעספּאַסע וואָס פּריווענץ נאַמינג קאַנפליקץ מיט יגזיסטינג אַנאַמיישאַנז אין די פּרויעקט און מאכט עס גלייך קלאָר אַז די קיפראַמעס קומען פֿון אונדזער קיפראַמעס טאָקענס טעקע. מאַכן אַ דינאַמיש רוק די kf-פאַדע-אין קיפראַמעס אַרבעט גרויס ווייַל עס איז פּשוט און עס איז קליין פּלאַץ צו באַלאַגאַן די טינגז. אין אנדערע אַנאַמיישאַנז, אָבער, מיר דאַרפֿן צו זיין פיל מער דינאַמיש, און דאָ מיר קענען לעווערידזש די ריזיק מאַכט פון CSS מנהג פּראָפּערטיעס. דאָס איז ווו קיפראַמעס טאָקענס טאַקע שייַנען קאַמפּערד מיט צעוואָרפן סטאַטיק אַנאַמיישאַנז. לאָמיר נעמען אַ פּראָסט סצענאַר: "רוק-אין" אַנאַמיישאַנז. אבער רוק פון וואו? 100 פּקס פון רעכט? 50% פון די לינקס? זאָל עס אַרייַן פון די שפּיץ פון די פאַרשטעלן? אָדער אפֿשר לאָזנ שווימען אין פון די דנאָ? אַזוי פילע פּאַסאַבילאַטיז, אָבער אַנשטאָט פון קריייטינג באַזונדער קייפראַמעס פֿאַר יעדער ריכטונג און יעדער ווערייישאַן, מיר קענען בויען איין פלעקסאַבאַל סימען וואָס אַדאַפּט זיך צו אַלע סינעריאָוז: /* * Slide In - דירעקטיאָנאַל רוק אַנאַמיישאַן * ניצן --kf-slide-from צו קאָנטראָלירן די ריכטונג * פעליקייַט: סליידז פון לינקס (-100%) * באַניץ: * אַנאַמיישאַן: קף-רוק-אין 0.3 ס יז-אויס; * --קף-רוק-פון: -100פּקס 0; // רוק פון לינקס * --kf-slide-from: 100px 0; // רוק פון רעכט * --קף-רוק-פון: 0 -50פּקס; // רוק פון שפּיץ */
@keyframes kf-slide-in { פון { איבערזעצן: var (--kf-slide-from, -100% 0); } צו { זעץ: 0 0; } }
איצט מיר קענען נוצן דעם איין @קייפראַמעס סימען פֿאַר קיין רוק ריכטונג פשוט דורך טשאַנגינג די --kf-slide-פון מנהג פאַרמאָג: .סיידבאַר { אַנאַמיישאַן: kf-slide-in 0.3s יז-אויס; /* ניצט פעליקייַט ווערט: סליידז פון לינקס */ }
.notification { אַנאַמיישאַן: kf-slide-in 0.4s יז-אויס; --kf-slide-from: 0 -50פּקס; /* רוק פון אויבן */ }
.modal { אַנאַמיישאַן: kf-fade-in 0.5s, קף-רוק-אין 0.5 ס קוביק-בעזיער (0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* רוק פון דנאָ-רעכט */ }
דער צוגאַנג גיט אונדז גלייבן בייגיקייט און האַלטן קאָנסיסטענסי. איין קייפראַמע דעקלאַראַציע, ינפאַנאַט פּאַסאַבילאַטיז. זען די פּען קיפראַמעס טאָקענס - דעמאָ 3 [פאָרקעד] דורך Amit Sheen. און אויב מיר ווילן צו מאַכן אונדזער אַנאַמיישאַנז אפילו מער פלעקסאַבאַל, אַלאַוינג פֿאַר "רוק-אויס" יפעקץ, מיר קענעןפשוט לייגן אַ --kf-slide-to מנהג פאַרמאָג, ענלעך צו וואָס מיר וועלן זען אין דער ווייַטער אָפּטיילונג. ביידירעקטיאָנאַל פארגרעסער קייפראַמעס אן אנדער פּראָסט אַנאַמיישאַן וואָס איז דופּליקייטיד אַריבער פּראַדזשעקס איז "פארגרעסער" יפעקץ. צי עס איז אַ סאַטאַל וואָג-אַרויף פֿאַר טאָסט אַרטיקלען, אַ דראַמאַטיק פארגרעסער-אין פֿאַר מאָדאַלס, אָדער אַ מילד וואָג-אַראָפּ ווירקונג פֿאַר כעדינגז, פארגרעסער אַנאַמיישאַנז זענען אומעטום. אַנשטאָט צו שאַפֿן באַזונדער קייפראַמעס פֿאַר יעדער וואָג ווערט, לאָזן אונדז בויען איין פלעקסאַבאַל גאַנג פון קף-זאָאָם קיפראַמעס:
/* * פארגרעסער - וואָג אַנאַמיישאַן * ניצן --kf-zoom-from און --kf-zoom-to צו קאָנטראָלירן וואָג וואַלועס * פעליקייַט: זומז פון 80% צו 100% (0.8 צו 1) * באַניץ: * אַנאַמיישאַן: קף-זאָאָם 0.2 ס יז-אויס; * --קף-זאָאָם-פון: 0.5; --קף-זאָאָם-צו: 1; // פארגרעסער פון 50% צו 100% * --קף-זאָאָם-פון: 1; --קף-זאָאָם-צו: 0; // פארגרעסער פון 100% צו 0% * --קף-זאָאָם-פון: 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, קף-זאָאָם 0.4 ס יז-אויס; --קף-רוק-פון: 0 100%; /* רוק פון אויבן */ /* ניצט פעליקייַט פארגרעסער: וואָג פון 80% צו 100% */ }
.modal { אַנאַמיישאַן: kf-zoom 0.3s קוביק-בעזיער (0.34, 1.56, 0.64, 1); --קף-זאָאָם-פון: 0; /* דראַמאַטיק פארגרעסער פון 0% צו 100% */ }
.heading { אַנאַמיישאַן: kf-fade-in 2s, kf-zoom 2s יז-אין; --קף-זאָאָם-פֿון: 1.2; --kf-zoom-to: 0.8; /* מילד וואָג אַראָפּ */ }
די פעליקייַט פון 0.8 (80%) אַרבעט בישליימעס פֿאַר רובֿ וי עלעמענטן, ווי טאָסט אַרטיקלען און קאַרדס, און עס איז נאָך גרינג צו קאַסטאַמייז פֿאַר ספּעציעל קאַסעס. זען די פּען קיפראַמעס טאָקענס - דעמאָ 4 [פאָרקעד] דורך Amit Sheen. איר קען האָבן באמערקט עפּעס טשיקאַווע אין די לעצטע ביישפילן: מיר האָבן קאַמביינד אַנאַמיישאַנז. איינער פון די הויפּט אַדוואַנטידזשיז פון ארבעטן מיט @קייפראַמעס טאָקענס איז אַז זיי זענען דיזיינד צו ויסשטימען סימלאַסלי מיט יעדער אנדערער. דעם גלאַט זאַץ איז ינטענשאַנאַל, נישט אַקסאַדענטאַל. מיר וועלן דיסקוטירן אַנאַמיישאַן זאַץ אין מער דעטאַל שפּעטער, אַרייַנגערעכנט ווו זיי קענען ווערן פּראָבלעמאַטיק, אָבער רובֿ קאַמבאַניישאַנז זענען סטרייטפאָרווערד און גרינג צו ינסטרומענט. באַמערקונג: בשעת שרייבן דעם אַרטיקל, און אפֿשר ווייַל פון שרייבן עס, איך געפֿונען זיך ריטינגקינג די גאנצע געדאַנק פון אַרייַנגאַנג אַנאַמיישאַנז. מיט אַלע די לעצטע אַדוואַנסיז אין CSS, טאָן מיר נאָך דאַרפֿן זיי? צומ גליק, Adam Argyle יקספּלאָרד די זעלבע פראגעס און אויסגעדריקט זיי בריליאַנטלי אין זיין בלאָג. דאָס איז נישט קאַנטראַדיקטערי וואָס איז געשריבן דאָ, אָבער עס איז אַ צוגאַנג צו באַטראַכטן, ספּעציעל אויב דיין פּראַדזשעקס פאַרלאָזנ זיך שווער אויף אַרייַנגאַנג אַנאַמיישאַנז. קעסיידערדיק אַנאַמיישאַנז בשעת אַרייַנגאַנג אַנאַמיישאַנז, ווי "וועלקן", "רוק" און "פארגרעסער" פּאַסירן אַמאָל און דאַן האַלטן, קעסיידערדיק אַנאַמיישאַנז שלייף ינדעפאַנאַטלי צו ציען ופמערקזאַמקייט אָדער אָנווייַזן אָנגאָינג טעטיקייט. די צוויי מערסט פּראָסט קעסיידערדיק אַנאַמיישאַנז איך טרעפן זענען "ומדריי" (פֿאַר לאָודינג ינדיקאַטאָרס) און "פּולס" (פֿאַר כיילייטינג וויכטיק עלעמענטן). די אַנאַמיישאַנז פאָרשטעלן יינציק טשאַלאַנדזשיז ווען עס קומט צו קריייטינג קייפראַמעס טאָקענס. ניט ענלעך אַרייַנגאַנג אַנאַמיישאַנז וואָס טיפּיקלי גיין פון איין שטאַט צו אנדערן, קעסיידערדיק אַנאַמיישאַנז דאַרפֿן צו זיין העכסט קוסטאָמיזאַבלע אין זייער נאַטור פּאַטערנז. די ספּין דאָקטאָר יעדער פּרויעקט סימז צו נוצן קייפל ומדריי אַנאַמיישאַנז. עטלעכע שפּין קלאַקווייז, אנדערע קאַונטערקלאָקווייז. עטלעכע טאָן אַ איין 360-גראַד ראָוטיישאַן, אנדערע טאָן קייפל טורנס פֿאַר אַ פאַסטער ווירקונג. אַנשטאָט צו שאַפֿן באַזונדער קייפראַמעס פֿאַר יעדער ווערייישאַן, לאָזן אונדז בויען איין פלעקסאַבאַל ומדריי וואָס כאַנדאַלז אַלע סינעריאָוז:
/* * ספּין - ראָוטיישאַן אַנאַמיישאַן * ניצן --kf-spin-from און --kf-spin-to צו קאָנטראָלירן די ראָוטיישאַן קייט * ניצן --kf-ספּין-טורנס צו קאָנטראָלירן די ראָוטיישאַן סומע * פעליקייַט: ראָוטייץ פון 0 דעג צו 360 דיגריז (1 פול ראָוטיישאַן) * באַניץ: * אַנאַמיישאַן: קף-ומדריי 1 ס לינעאַר ינפאַנאַט; * --קף-שפּין-טורנס: 2; // 2 פול ראָוטיישאַנז * --קף-שפּין-פון: 0דעג; --קף-שפּין-צו: 180דעג; // האַלב ראָוטיישאַן * --קף-שפּין-פון: 0דעג; --קף-שפּין-צו: -360דעג; // קאָונטערקלאָקווייז */
@keyframes kf-spin { פון { דרייען: וואַר (--קף-ומדריי-פון, 0דעג); } צו { דרייען: קאַלק(וואַר(-קף-ומדריי-פון, 0דעג) + וואַר(-קף-שפּין-צו, 360דעג) * וואַר(-קף-ומדרייען-טורנס, 1)); } }
איצט מיר קענען מאַכן קיין ומדריי ווערייישאַן מיר ווי:
.לאָדינג-ספּיננער { אַנאַמיישאַן: קף-ומדריי 1 ס לינעאַר ינפאַנאַט; /* ניצט פעליקייַט: ראָוטייץ פון 0 דעג צו 360 דעג */ }
.fast-loader { אַנאַמיישאַן: Kf-Spin 1.2s יז-אין-אויס ינפאַנאַט בייַטנ לויט דער ריי; --קף-שפּין-טורנס: 3; /* 3 פול ראָוטיישאַנז פֿאַר יעדער ריכטונג פּער ציקל*/ }
.steped-reverse { אַנאַמיישאַן: קף-שפּין 1.5 ס סטעפּס (8) ינפאַנאַט; --קף-שפּין-צו: -360דעג; /* קעגן זייגערווייז */ }
.subtle-wiggle { אַנאַמיישאַן: קף-שפּין 2 ס יז-אין-אויס ינפאַנאַט בייַטנ לויט דער ריי; --קף-שפּין-פון: -16דעג; --קף-שפּין-צו: 32דעג; /* וויגאַל 36 דיגריז: צווישן -18 דיגריז און +18 דיגריז */ }
זען די פּען קיפראַמעס טאָקענס - דעמאָ 5 [פאָרקעד] דורך Amit Sheen. די שיינקייט פון דעם צוגאַנג איז אַז די זעלבע קייפראַמעס אַרבעט פֿאַר לאָודינג ספּיננערס, ראָוטייטינג ייקאַנז, וויגאַל יפעקץ און אפילו קאָמפּלעקס מאַלטי-קער אַנאַמיישאַנז. די פּאַלס פּאַראַדאָקס דויפעק אַנאַמיישאַנז זענען טריקיער ווייַל זיי קענען "פּולס" פאַרשידענע פּראָפּערטיעס. עטלעכע דויפעק די וואָג, אנדערע דויפעק די אָופּאַסאַטי, און עטלעכע פּאַלס קאָליר פּראָפּערטיעס ווי ברייטנאַס אָדער זעטיקונג. אלא ווי קריייטינג באַזונדער קייפראַמעס פֿאַר יעדער פאַרמאָג, מיר קענען מאַכן קייפראַמעס וואָס אַרבעט מיט קיין CSS פאַרמאָג. דאָ ס אַ ביישפּיל פון אַ דויפעק קיפראַמע מיט וואָג און אָופּאַסאַטי אָפּציעס:
/* * דויפעק - פּאַלסינג אַנאַמיישאַן * ניצן --kf-pulse-scale-from און --kf-pulse-scale-to צו קאָנטראָלירן וואָג קייט * ניצן --kf-pulse-opacity-from און --kf-pulse-opacity-to צו קאָנטראָלירן אָופּאַסאַטי קייט * פעליקייַט: קיין דויפעק (אַלע וואַלועס 1) * באַניץ: * אַנאַמיישאַן: kf-pulse 2s יז-אין-אויס ינפאַנאַט בייַטנ לויט דער ריי; * --קף-פולס-וואָג-פון: 0.95; --kf-pulse-scale-to: 1.05; // וואָג דויפעק * --קף-פּולס-אָופּאַסאַטי-פון: 0.7; --קף-פולס-אָופּאַסאַטי-צו: 1; // אָופּאַסאַטי דויפעק */
@keyframes kf-pulse { פון { וואָג: var (--kf-pulse-scale-from, 1); אָופּאַסאַטי: var (--kf-Puls-Oacity-from, 1); } צו { וואָג: var (--kf-pulse-scale-to, 1); אָופּאַסאַטי: var (--kf-pulse-oacity-to, 1); } }
דאָס קריייץ אַ פלעקסאַבאַל דויפעק וואָס קענען ופלעבן קייפל פּראָפּערטיעס: .call-to-action { אַנאַמיישאַן: קף-פּולס 0.6 ס ינפאַנאַט בייַטנ לויט דער ריי; --קף-פולס-אָופּאַסאַטי-פון: 0.5; /* אָופּאַסאַטי דויפעק */ }
.notification-dot { אַנאַמיישאַן: kf-pulse 0.6s יז-אין-אויס ינפאַנאַט בייַטנ לויט דער ריי; --kf-pulse-scale-from: 0.9; --kf-pulse-scale-to: 1.1; /* וואָג דויפעק */ }
.text-highlight { אַנאַמיישאַן: קף-פּולס 1.5 ס יז-אויס ינפאַנאַט; --kf-pulse-scale-from: 0.8; --קף-פולס-אָופּאַסאַטי-פון: 0.2; /* וואָג און אָופּאַסאַטי דויפעק */ }
זען די פּען קיפראַמעס טאָקענס - דעמאָ 6 [פאָרקעד] דורך Amit Sheen. דעם איין קף-פּולס קיפראַמע קענען שעפּן אַלץ פון סאַטאַל ופמערקזאַמקייט גראַבס צו דראַמאַטיק כיילייץ, אַלע בשעת עס איז גרינג צו קאַסטאַמייז. אַוואַנסירטע יזינג איינער פון די גרויס טינגז וועגן ניצן קיפראַמעס טאָקענס איז ווי גרינג עס איז צו יקספּאַנד אונדזער אַנאַמיישאַן ביבליאָטעק און צושטעלן יפעקץ וואָס רובֿ דעוועלאָפּערס וואָלט נישט אַרן צו שרייַבן פֿון קראַצן, ווי גומע אָדער אָפּשפּרונג. דאָ איז אַ ביישפּיל פון אַ פּשוט "אָפּשפּרונג" קייפראַמעס סימען וואָס ניצט אַ --kf-bounce-from מנהג פאַרמאָג צו קאָנטראָלירן די שפּרינגען הייך. /* * אָפּשפּרונג - באַונסינג אַרייַנגאַנג אַנאַמיישאַן * ניצן --kf-bounce-from צו קאָנטראָלירן די שפּרינגען הייך * פעליקייַט: דזשאַמפּס פֿון 100vh (אַוועק פאַרשטעלן) * באַניץ: * אַנאַמיישאַן: קפ-אָפּשפּרונג 3 ס יז-אין; * --kf-bounce-from: 200px; // שפּרינגען פון 200 פּקס הייך */
@keyframes kf-bounce { 0% { איבערזעצן: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { איבערזעצן: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { איבערזעצן: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { איבערזעצן: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { איבערזעצן: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { איבערזעצן: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { איבערזעצן: 0 calc(var(--kf-bounce-from, 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) * באַניץ: * אַנאַמיישאַן: קפ-גומע-אין 2 ס יז-אין-אויס ביידע; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // אַרייַן פֿון (-50 פּקס, -200 פּקס) */
@keyframes kf-elastic-in { 0% { איבערזעצן: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { איבערזעצן: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { איבערזעצן: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-from-Y, 0px) * 0.1312); }
44% { איבערזעצן: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { איבערזעצן: 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); }
88% { איבערזעצן: 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 יז-אין, קף-זאָאָם 3 ס לינעאַר; --קף-זאָאָם-פון: 0; }
.bounce-and-slide { אַנאַמיישאַן זאַץ: לייגן; /* ביידע אַנאַמיישאַנז נוצן איבערזעצן */ אַנאַמיישאַן: kf-bounce 3s יז-אין, קף-רוק-אין 3 ס יז-אויס; --kf-slide-from: -200px; }
.elastic-in { אַנאַמיישאַן: kf-elastic-in 2s יז-אין-out ביידע; }
זען די פּען קיפראַמעס טאָקענס - דעמאָ 7 [פאָרקעד] דורך Amit Sheen. ביז צו דעם פונט, מיר האָבן געזען ווי מיר קענען קאָנסאָלידירן קיפראַמעס אויף אַ קלוג און עפעקטיוו וועג. פון קורס, איר זאל וועלן צו טוויק טינגז צו בעסער פּאַסיק דיין פּרויעקט דאַרף, אָבער מיר האָבן קאַווערד ביישפילן פון עטלעכע פּראָסט אַנאַמיישאַנז און וואָכעדיק נוצן קאַסעס. און מיט די קיפראַמעס טאָקענס אין פּלאַץ, מיר איצט האָבן שטאַרק בנין בלאַקס פֿאַר קריייטינג קאָנסיסטענט, מאַינטאַבאַל אַנאַמיישאַנז איבער די גאנצע פּרויעקט. ניט מער דופּליקייטיד קייפראַמעס, ניט מער גלאבאלע פאַרנעם קאָנפליקט. נאָר אַ ריין, באַקוועם וועג צו שעפּן אַלע אונדזער אַנאַמיישאַן דאַרף. אבער די פאַקטיש קשיא איז: ווי טאָן מיר קאַמפּאָוז די בנין בלאַקס צוזאַמען? שטעלן עס אַלע צוזאַמען מיר האָבן געזען אַז קאַמביינינג יקערדיק קייפראַמעס טאָקענס איז פּשוט. מיר טאָן ניט דאַרפֿן עפּעס ספּעציעל אָבער צו דעפינירן דער ערשטער אַנאַמיישאַן, דעפינירן די רגע, שטעלן די וועריאַבאַלז ווי דארף, און אַז ס עס. /* וועלקן אין + רוק אין */ .טאָסט { אַנאַמיישאַן: kf-פאַדע-אין 0.4 ס, kf-slide-in 0.4s קוביק-בעזיער (0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* פארגרעסער אין + וועלקן אין */ .modal { אַנאַמיישאַן: kf-fade-in 0.3s, kf-zoom 0.3 ס קוביק-בעזיער (0.34, 1.56, 0.64, 1); --קף-זאָאָם-פֿון: 0.7; --קף-זאָאָם-צו: 1; }
/* רוק אין + דויפעק */ .notification { אַנאַמיישאַן: kf-slide-in 0.5s, kf-pulse 1.2s יז-אין-אויס ינפאַנאַט בייַטנ לויט דער ריי; --kf-slide-from: -100px 0; --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; }
די קאַמבאַניישאַנז אַרבעט שיין ווייַל יעדער אַנאַמיישאַן טאַרגאַץ אַ אַנדערש פאַרמאָג: אָופּאַסאַטי, יבערמאַכן (איבערזעצן / וואָג), אאז"ו ו. אבער מאל עס זענען קאָנפליקט, און מיר דאַרפֿן צו וויסן וואָס און ווי צו האַנדלען מיט זיי. ווען צוויי אַנאַמיישאַנז פּרובירן צו ופלעבן די זעלבע פאַרמאָג - פֿאַר בייַשפּיל, ביידע אַנאַמייטינג וואָג אָדער ביידע אַנאַמייטינג אָופּאַסאַטי - דער רעזולטאַט וועט נישט זיין וואָס איר דערוואַרטן. דורך פעליקייַט, בלויז איינער פון די אַנאַמיישאַנז איז אַקשלי געווענדט צו דער פאַרמאָג, וואָס איז די לעצטע אין דער אַנאַמיישאַן רשימה. דאָס איז אַ באַגרענעצונג פון ווי CSS כאַנדאַלז קייפל אַנאַמיישאַנז אויף דער זעלביקער פאַרמאָג. צום ביישפּיל, דאָס וועט נישט אַרבעטן ווי בדעה ווייַל בלויז די Kf-Puls אַנאַמיישאַן וועט זיין גילטיק. .bad-combo { אַנאַמיישאַן: kf-zoom 0.5 ס פאָרווערדז, קף-פּולס 1.2 ס ינפאַנאַט בייַטנ לויט דער ריי; --קף-זאָאָם-פֿון: 0.5; --kf-zoom-to: 1.2; --kf-pulse-scale-from: 0.8; --kf-pulse-scale-to: 1.1; }
אַנימאַטיאָן אַדדיטיאָן די סימפּלאַסט און מערסט דירעקט וועג צו שעפּן קייפל אַנאַמיישאַנז וואָס ווירקן דער זעלביקער פאַרמאָג איז צו נוצן די אַנאַמיישאַן-קאַמפּאָוזישאַן פאַרמאָג. אין די לעצטע בייַשפּיל אויבן, די kf-pulse אַנאַמיישאַן ריפּלייסיז די kf-zoom אַנאַמיישאַן, אַזוי מיר וועלן נישט זען די ערשט פארגרעסער און וועט נישט באַקומען די דערוואַרט וואָג פון 1.2. דורך באַשטעטיקן די אַנאַמיישאַן זאַץ צו לייגן, מיר זאָגן דעם בלעטערער צו פאַרבינדן ביידע אַנאַמיישאַנז. דאָס גיט אונדז דער רעזולטאַט וואָס מיר ווילן. .קאָמפּאָנענט-צוויי { אַנאַמיישאַן זאַץ: לייגן; }
זען די פּען קיפראַמעס טאָקענס - דעמאָ 8 [פאָרקעד] דורך Amit Sheen. דער צוגאַנג אַרבעט געזונט פֿאַר רובֿ קאַסעס ווו מיר ווילן צו פאַרבינדן יפעקץ אויף דער זעלביקער פאַרמאָג. עס איז אויך נוציק ווען מיר דאַרפֿן צו פאַרבינדן אַנאַמיישאַנז מיט סטאַטיק פאַרמאָג וואַלועס. צום ביישפּיל, אויב מיר האָבן אַן עלעמענט וואָס ניצט די איבערזעצן פאַרמאָג צו שטעלן עס פּונקט ווו מיר ווילן, און דעמאָלט מיר וועלן צו אַנימאַטירן עס מיט די kf-slide-in קיפראַמעס, מיר באַקומען אַ פּאַסקודנע קענטיק שפּרינגען אָן אַנאַמיישאַן זאַץ. זען די פּען קיפראַמעס טאָקענס - דעמאָ 9 [פאָרקעד] דורך Amit Sheen. מיט אַנאַמיישאַן-קאַמפּאָוזישאַנז שטעלן צו לייגן, די אַנאַמיישאַן איז סמודלי קאַמביינד מיט די יגזיסטינגיבערמאַכן, אַזוי דער עלעמענט סטייז אין פּלאַץ און אַנאַמייץ ווי דערוואַרט. אַנאַמיישאַן סטאַגער אן אנדער וועג פון האַנדלינג קייפל אַנאַמיישאַנז איז צו "וואַקלענ זיך" זיי - דאָס איז, אָנהייב די רגע אַנאַמיישאַן אַ ביסל נאָך דער ערשטער ענדיקן. עס איז נישט אַ לייזונג וואָס אַרבעט פֿאַר יעדער פאַל, אָבער עס איז נוציק ווען מיר האָבן אַ אַרייַנגאַנג אַנאַמיישאַן נאכגעגאנגען דורך אַ קעסיידערדיק אַנאַמיישאַן. /* וועלקן אין + אָופּאַסאַטי דויפעק */ .notification { אַנאַמיישאַן: kf-fade-in 2s ease-out, kf-pulse 0.5s 2s יז-אין-אויס ינפאַנאַט בייַטנ לויט דער ריי; --קף-פּולס-אָופּאַסאַטי-צו: 0.5; }
זען די פּען קיפראַמעס טאָקענס - דעמאָ 10 [פאָרקעד] דורך Amit Sheen. סדר ענינים א גרויס טייל פון די אַנאַמיישאַנז מיט וואָס מיר אַרבעטן נוצן די יבערמאַכן פאַרמאָג. אין רובֿ קאַסעס, דאָס איז פשוט מער באַקוועם. עס אויך האט אַ פאָרשטעלונג מייַלע ווייַל יבערמאַכן אַנאַמיישאַנז קענען זיין גפּו-אַקסעלערייטיד. אבער אויב מיר נוצן טראַנספאָרמאַציע, מיר דאַרפֿן צו אָננעמען אַז דער סדר אין וואָס מיר דורכפירן אונדזער טראַנספאָרמאַציע איז וויכטיק. א פּלאַץ. אין אונדזער קייפראַמעס ביז איצט, מיר האָבן געוויינט יחיד טראַנספאָרמז. לויט די ספּעסאַפאַקיישאַנז, זיי זענען שטענדיק געווענדט אין אַ פאַרפעסטיקט סדר: ערשטער, דער עלעמענט ווערט איבערזעצן, דאַן דרייען און דערנאָך וואָג. דאָס מאכט זינען און איז וואָס רובֿ פון אונדז דערוואַרטן. אָבער, אויב מיר נוצן די יבערמאַכן פאַרמאָג, די סדר אין וואָס די פאַנגקשאַנז זענען געשריבן איז דער סדר אין וואָס זיי זענען געווענדט. אין דעם פאַל, אויב מיר מאַך עפּעס 100 בילדצעלן אויף די X-אַקס און דאַן דרייען עס דורך 45 דיגריז, עס איז נישט די זעלבע ווי ערשטער ראָוטייטינג עס דורך 45 דיגריז און דעמאָלט מאַך עס 100 בילדצעלן. /* ראָזעווע קוואַדראַט: ערשטער איבערזעצן, דעמאָלט דרייען */ .example-one { יבערמאַכן: טראַנסלאַטעקס (100 פּקס) דרייען (45 דעג); }
/* גרין קוואַדראַט: ערשטער דרייען, דעמאָלט איבערזעצן */ .example-two { יבערמאַכן: דרייען (45דעג) טראַנסלאַטעקס (100פּקס); }
זען די פּען קיפראַמעס טאָקענס - דעמאָ 11 [פאָרקעד] דורך Amit Sheen. אָבער לויט די יבערמאַכן סדר, אַלע יחיד טראַנספאָרמז - אַלץ וואָס מיר האָבן געוויינט פֿאַר די קיפראַמעס טאָקענס - כאַפּאַנז איידער די יבערמאַכן פאַנגקשאַנז. אַז מיטל אַלץ איר שטעלן אין די יבערמאַכן פאַרמאָג וועט פּאַסירן נאָך די אַנאַמיישאַנז. אבער אויב איר שטעלן, פֿאַר בייַשפּיל, איבערזעצן צוזאַמען מיט די kf-ספּין קיפראַמעס, די איבערזעצן וועט פּאַסירן איידער די אַנאַמיישאַן. שוין צעמישט?! דאָס פירט צו סיטואַטיאָנס ווו סטאַטיק וואַלועס קענען פאַרשאַפן פאַרשידענע רעזולטאַטן פֿאַר דער זעלביקער אַנאַמיישאַן, ווי אין די פאלגענדע פאַל:
/* פּראָסט אַנאַמיישאַן פֿאַר ביידע ספּיננערס */ .spinner { אַנאַמיישאַן: קף-ומדריי 1 ס לינעאַר ינפאַנאַט; }
/* ראָזעווע ספּיננער: איבערזעצן איידער דרייען (יחיד יבערמאַכן) */ .spinner-pink { איבערזעצן: 100% 50%; }
/* גרין ספּיננער: דרייען און איבערזעצן (פונקציע סדר) */ .ספּיננער-גרין { יבערמאַכן: איבערזעצן (100%, 50%); }
זען די פּען קיפראַמעס טאָקענס - דעמאָ 12 [פאָרקעד] דורך Amit Sheen. איר קענט זען אַז דער ערשטער ספּיננער (ראָזעווע) באַקומען אַן איבערזעצן וואָס כאַפּאַנז איידער די דרייען פון קף-שפּין, אַזוי ער ערשטער באוועגט צו זיין אָרט און דעמאָלט ספּינז. דער צווייטער ספּיננער (גרין) געץ אַ איבערזעצונג () פֿונקציע וואָס כאַפּאַנז נאָך די יחיד יבערמאַכן, אַזוי דער עלעמענט איז ערשטער ספּינז, דעמאָלט מאָוועס קאָרעוו צו זיין קראַנט ווינקל, און מיר באַקומען די ברייט אָרביט ווירקונג. ניין, דאָס איז נישט אַ זשוק. דאָס איז נאָר איינער פון די טינגז וואָס מיר דאַרפֿן צו וויסן וועגן CSS און האַלטן אין זינען ווען איר אַרבעט מיט קייפל אַנאַמיישאַנז אָדער קייפל טראַנספאָרמז. אויב נויטיק, איר קענען אויך שאַפֿן אַן נאָך גאַנג פון kf-spin-alt קיפראַמעס וואָס דרייען עלעמענטן ניצן די Rotate () פֿונקציע. רידוסט באַוועגונג און בשעת מיר רעדן וועגן אָלטערנאַטיוו קייפראַמעס, מיר קענען נישט איגנאָרירן די "קיין אַנאַמיישאַן" אָפּציע. איינער פון די ביגאַסט אַדוואַנטידזשיז פון ניצן קייפראַמעס טאָקענס איז אַז אַקסעסאַביליטי קענען זיין בייקט אין, און עס איז פאקטיש גאַנץ גרינג צו טאָן. דורך דיזיינינג אונדזער קייפראַמעס מיט אַקסעסאַביליטי אין זינען, מיר קענען ענשור אַז יוזערז וואָס בעסער רידוסט באַוועגונג באַקומען אַ סמודער, ווייניקער דיסטראַקטינג דערפאַרונג, אָן עקסטרע אַרבעט אָדער קאָד דופּליקיישאַן. די פּינטלעך טייַטש פון "רעדוסעד באַוועגונג" קענען טוישן אַ ביסל פון איין אַנאַמיישאַן צו אנדערן, און פון פּרויעקט צו פּרויעקט, אָבער דאָ זענען עטלעכע וויכטיק פונקטן צו האַלטן אין זינען: מיוטינג קייפראַמעס בשעת עטלעכע אַנאַמיישאַנז קענען זיין סאָפאַנד אָדער סלאָוד אַראָפּ, עס זענען אנדערע וואָס זאָל פאַרשווינדן גאָר ווען רידוסט באַוועגונג איז פארלאנגט. דויפעק אַנאַמיישאַנז זענען אַ גוט בייַשפּיל. צו מאַכן זיכער אַז די אַנאַמיישאַנז לויפן נישט אין רידוסט באַוועגונג מאָדע, מיר קענען פשוט ייַנוויקלען זיי אין די צונעמען מידיאַ אָנפֿרעג.
@מעדיע (פּרעפערס-רעדוסעד-מאָטיאָן: קיין ייבערהאַנט) { @keyfrmaes kf-pulse { פון { וואָג: var (--kf-pulse-scale-from, 1); אָופּאַסאַטי: var (--kf-Puls-Oacity-from, 1); } צו { וואָג: var (--kf-pulse-scale-to, 1); אָופּאַסאַטי:var(--kf-pulse-opacity-to, 1); } } }
דאָס ינשורז אַז יוזערז וואָס האָבן באַשטימט פּראַפערז-רידוסט באַוועגונג צו רעדוצירן, וועלן נישט זען די אַנאַמיישאַן און וועט באַקומען אַ דערפאַרונג וואָס גלייַכן זייער ייבערהאַנט. גלייך אין עס זענען עטלעכע קייפראַמעס מיר קענען נישט פשוט באַזייַטיקן, אַזאַ ווי אַרייַנגאַנג אַנאַמיישאַנז. דער ווערט מוז זיך טוישן, מוז אויפלעבן; אַנדערש, דער עלעמענט וועט נישט האָבן די ריכטיק וואַלועס. אבער אין רידוסט באַוועגונג, דעם יבערגאַנג פון די ערשט ווערט זאָל זיין רעגע. צו דערגרייכן דעם, מיר וועט דעפינירן אַן עקסטרע גאַנג פון קייפראַמעס ווו די ווערט דזשאַמפּס מיד צו די סוף שטאַט. די ווערן אונדזער פעליקייַט קייפראַמעס. דערנאָך, מיר לייגן די רעגולער קיפראַמעס אין אַ מעדיע אָנפֿרעג פֿאַר פּראַפערז-רידוסט באַוועגונג שטעלן צו קיין ייבערהאַנט, פּונקט ווי אין די פריערדיקע בייַשפּיל. /* פּאָפּ אין טייקעף פֿאַר רידוסט באַוועגונג */ @keyframes kf-zoom { פון, צו { וואָג: var (--kf-zoom-to, 1); } }
@מעדיע (פּרעפערס-רעדוסעד-מאָטיאָן: קיין ייבערהאַנט) { /* אָריגינעל פארגרעסער קיפראַמעס */ @keyframes kf-zoom { פון { וואָג: var(--kf-zoom-from, 0.8); } צו { וואָג: var (--kf-zoom-to, 1); } } }
אויף דעם וועג, יוזערז וואָס בעסער וועלן רידוסט באַוועגונג וועט זען די עלעמענט דערשייַנען גלייך אין זיין לעצט שטאַט, בשעת אַלעמען אַנדערש באַקומען די אַנימאַטעד יבערגאַנג. די ווייך צוגאַנג עס זענען קאַסעס ווו מיר ווילן צו האַלטן עטלעכע באַוועגונג, אָבער פיל סאַפטער און קאַמער ווי דער אָריגינעל אַנאַמיישאַן. פֿאַר בייַשפּיל, מיר קענען פאַרבייַטן אַ אָפּשפּרונג אַרייַנגאַנג מיט אַ מילד וועלקן-אין.
@keyframes kf-bounce { /* ווייך וועלקן-אין פֿאַר רידוסט באַוועגונג */ }
@מעדיע (פּרעפערס-רעדוסעד-מאָטיאָן: קיין ייבערהאַנט) { @keyframes kf-bounce { /* אָריגינעל אָפּשפּרונג קייפראַמעס */ } }
איצט, ניצערס מיט רידוסט באַוועגונג ענייבאַלד נאָך באַקומען אַ געפיל פון אויסזען, אָבער אָן די טיף באַוועגונג פון אַ אָפּשפּרונג אָדער גומע אַנאַמיישאַן. מיט די בנין בלאַקס אין פּלאַץ, די ווייַטער קשיא איז ווי צו מאַכן זיי אַ טייל פון די פאַקטיש וואָרקפלאָוו. שרייבן פלעקסאַבאַל קייפראַמעס איז איין זאַך, אָבער מאכן זיי פאַרלאָזלעך אין אַ גרויס פּרויעקט ריקווייערז אַ ביסל סטראַטעגיעס וואָס איך געהאט צו לערנען די שווער וועג. ימפּלאַמענטיישאַן סטראַטעגיעס & בעסטער פּראַקטיסיז אַמאָל מיר האָבן אַ האַרט ביבליאָטעק פון קייפראַמעס טאָקענס, די פאַקטיש אַרויסרופן איז ווי צו ברענגען זיי אין וואָכעדיק אַרבעט.
דער נסיון איז צו פאַלן אַלע קייפראַמעס אין אַמאָל און דערקלערן די פּראָבלעם סאַלווד, אָבער אין פיר איך געפֿונען אַז די בעסטער רעזולטאַטן קומען פון גראַדזשואַל קינדער. אָנהייבן מיט די מערסט פּראָסט אַנאַמיישאַנז, אַזאַ ווי וועלקן אָדער רוק. דאס זענען גרינג ווינס וואָס ווייַזן באַלדיק ווערט אָן ריקוויירינג גרויס רירייץ. נאַמינג איז אן אנדער פונט וואָס פארדינט ופמערקזאַמקייַט. א קאָנסיסטענט פּרעפיקס אָדער נאַמעספּאַסע מאכט עס קלאָר ווי דער טאָג וואָס אַנאַמיישאַנז זענען טאָקענס און וואָס זענען היגע איין-אָפס. עס אויך פּריווענץ אַקסאַדענטאַל קאַליזשאַנז און העלפּס נייַע מאַנשאַפֿט מיטגלידער דערקענען די שערד סיסטעם אין אַ בליק. דאַקיומענטיישאַן איז פּונקט ווי וויכטיק ווי די קאָד זיך. אפילו אַ קורץ באַמערקונג אויבן יעדער קייפראַמעס סימען קענען שפּאָרן שעה פון געסינג שפּעטער. א דעוועלאָפּער זאָל קענען צו עפֿענען די טאָקענס טעקע, יבערקוקן די ווירקונג זיי דאַרפֿן און נאָכמאַכן די באַניץ מוסטער גלייך אין זייער קאָמפּאָנענט. בייגיקייט איז וואָס מאכט דעם צוגאַנג ווערט די מי. דורך ויסשטעלן פיליק מנהג פּראָפּערטיעס, מיר געבן טימז פּלאַץ צו אַדאַפּט די אַנאַמיישאַן אָן ברייקינג די סיסטעם. אין דער זעלביקער צייַט, פּרובירן נישט צו אָוווערקאַמפּליקייט. צושטעלן די נאַבז וואָס ענין און האַלטן די מנוחה מיינונג. צום סוף, געדענקען אַקסעסאַביליטי. ניט יעדער אַנאַמיישאַן דאַרף אַ רידוסט באַוועגונג אנדער ברירה, אָבער פילע טאָן. באַקינג אין די אַדזשאַסטמאַנץ פרי מיטל אַז מיר קיינמאָל האָבן צו רעטראָפיט זיי שפּעטער, און עס ווייזט אַ מדרגה פון זאָרג אַז אונדזער יוזערז וועט באַמערקן אפילו אויב זיי קיינמאָל דערמאָנען עס.
אין מיין דערפאַרונג, טרעאַטינג קייפראַמעס טאָקענס ווי אַ טייל פון אונדזער פּלאַן טאָקענס וואָרקפלאָוו איז וואָס מאכט זיי שטעקן. אַמאָל זיי זענען אין פּלאַץ, זיי האַלטן געפיל ווי ספּעציעל יפעקץ און ווערן אַ טייל פון די פּלאַן שפּראַך, אַ נאַטירלעך פאַרלענגערונג פון ווי די פּראָדוקט באוועגט און ריספּאַנדז. ראַפּינג אַרויף אַנאַמיישאַנז קענען זיין איינער פון די מערסט פריידיק טיילן פון בנין ינטערפייסיז, אָבער אָן סטרוקטור, זיי קענען אויך ווערן איינער פון די ביגאַסט קוואלן פון פראַסטריישאַן. דורך טרעאַטינג קיפראַמעס ווי טאָקענס, איר נעמען עפּעס וואָס איז יוזשאַוואַלי מעסי און שווער צו פירן און מאַכן עס אַ קלאָר, פּרידיקטאַבאַל סיסטעם. דער עמעס ווערט איז ניט בלויז אין שפּאָרן אַ ביסל שורות פון קאָד. עס איז אין בטחון אַז ווען איר נוצן אַ וועלקן, רוק, פארגרעסער אָדער ומדריי, איר וויסן פּונקט ווי עס וועט ביכייווז איבער די פּרויעקט. עס איז אין די בייגיקייט וואָס קומט פון מנהג פּראָפּערטיעס אָן די כאַאָס פון סאָף ווערייישאַנז. און עס איז אין די אַקסעסאַביליטי געבויט אין דער יסוד אלא ווי צוגעגעבן וויאַ נאָכדעם. איך האב געזען די יידיאַז אַרבעט אין פאַרשידענע טימז און פאַרשידענע קאָדעבאַסעס, און דער מוסטער איז שטענדיק דער זעלביקער. אַמאָל די טאָקענס זענען אין פּלאַץ, קיפראַמעס האַלטן צו זיין אַ צעוואָרפן זאַמלונג פון טריקס און ווערן אַ טייל פון די פּלאַן שפּראַך. זיי מאַכן די פּראָדוקט פילן מער ינטענשאַנאַל, מער קאָנסיסטענט און מער לעבעדיק. אויב איר נעמען איין זאַך פון דעם אַרטיקל, לאָזן עס זיין דאָס: אַנאַמיישאַנז פאַרדינען די זעלבע זאָרג און סטרוקטור וואָס מיר שוין געבן צו פארבן, טיפּאָגראַפי און ספּייסינג. א קליין ינוועסמאַנט אין קייפראַמעס טאָקענס פּייַס אַוועק יעדער מאָל דיין צובינד באוועגט.
