להשהות & לולאה CSS אנימציות עם המתן! הנפשת

יש הרבה מה שאתה יכול לעשות עם אנימציה CSS טהור, אבל השהיה & looping אנימציה אינו אפשרי עם מפרט W3 הנוכחי.

אבל עם כלי חינם כמו המתן! הנפשת אתה יכול למעשה ליצור אנימציות looped מאפס עם עיכובים מותאמים אישית בין כל לולאה. זה אולי נראה כמו משימה ארצי אבל זה פותר נקודת כאב עבור מפתחים רבים.

יש לציין כי יש נכס בשם CSS עיכוב בהנפשה איזה מעכב את להתחיל של אנימציה CSS. עם זאת אינו משפיע על הנפשה חוזרת כפי שהוא רק מעכב את נקודת ההתחלה.

המתן! הנפשת אוטומטי חישובים כמה הפסקות צריך להיות ממוקם בתוך אנימציה אישית keyframes כדי ליצור את משך ההשהיה המדויק אתה צריך בין לולאות. זה יכול להיעשות ביד אבל זה מאוד מסובך, שלא לדבר על סופר מעצבן.

יישום אינטרנט זה יכול לעבוד עם כל תכונה אנימציה CSS3, כולל סיבובים והתמרות. אתה לא כותב כל תכונות CSS חדשות, אלא הבניין על גבי התכונה keyframes ליצור הפסקות על בסיס אחוזים (מ 0% ל 100%) בתוך האנימציה.

בדוק את דף הבית כדי לראות כמה דוגמאות בפעולה. זה די ברור מה אתה יכול לעשות את קוד המקור הוא שם כדי להעתיק / להדביק לתוך העבודה שלך.

שים לב זה לא ספרייה מלאה. זה גנרטור יוצר את קוד ה- CSS שלך ב- the-fly בהתבסס על כל מה שאתה צריך עבור עיכוב אנימציה.

אם אתה רוצה פתרון פשוט מחוץ לאתר אז אתה יכול הורד את Sass mixin. זה קצת יותר מסובך זה דורש מפה סאס, לכן עליך להבין כיצד להוסיף מאפיינים מותאמים אישית ולכתוב את התחביר שלך כראוי.

הנה דוגמה של איך היית להתקשר mixinYou

 (0): (:): (:) 1 (, צבע רקע: כחול), 50: (שינוי: סולם (2), צבע רקע: ירוק), 100: (transform : קנה מידה (3), צבע רקע: אדום)), משך: 2, waitTime: 1, תזמוןפונקציה: קלות, איטרציהאין סופי)); 

מפתחי אינטרנט Pro צריך שום בעיה ללמוד את החבלים ואת הבניין הזה לתוך mixin לשימוש חוזר. אבל מפתחי טירון עלול להיאבק כדי לקבל את זה עובד, ומכאן יישום האינטרנט.

כל זה קוד מקור זמין בחינם על גייתוב אם אתה רוצה להוריד עותק מקומי. אבל מאז זה כזה תכונה מוזרה זה לא משהו שאתה כנראה צריך בפרויקטים רבים. לכן המתן! הנפשת יישום אינטרנט צריך להיות יותר ממספיק כדי לעזור לך לפתור בעיה חד פעמית of עיכוב אנימציות looped עם CSS טהור.

זה ממש כיף גרזן זה גם די מעורפל על ידי עיצוב. אבל זה הולך להראות רק כמה אפשר עם CSS3 קצת תחכום.