כל מפתח העתיק גוש של @keyframes מתשובה של Stack Overflow, הדביקו אותו, רעננו ומצאו את האלמנט יושב בשקט מושלם תשע פעמים מתוך עשר הסיבה משעממת: שם האנימציה ב- @keyframes הכלל לא תאם את השם ב- animation קיצור, או משך הזמן נותר על אפס, או המחלקה מעולם לא נחתה על האלמנט הסיבה האחרת היא כי אנימציה keyframe היא אחת מאותן פינות של CSS שבו אתה לא יכול לשפוט את התוצאה על ידי קריאת הקוד רצף של אחוזים ו transforms אומר לך שום דבר על אם התנועה מרגישה חלקה, snappy או מחלת ים עד שאתה צופה בו לרוץ.
אנימציית CSS היא הדפדפן's מנגנון להעברת אלמנט דרך רצף בעל שם של סגנונות לאורך זמן. בניגוד למעבר, המחייה שינוי בודד ומחכה לטריגר, אנימציה עוקבת אחר א @keyframes סקריפט עם כמה צעדים שתרצה, יכול ללולאה לנצח, ומתחיל מעצמו ברגע שהוא מיושם. זה מה שמפעיל את ספינרים לטעינת, פעימות קשב, אפקטי כניסה וכל פיסת תנועה סביבתית שגורמת לממשק להרגיש חי. אבל שני החצאים, ה-keyframes והקיצור, צריכים להסכים בדיוק, והקיצור אורז שבעה או שמונה ערכים לשורה אחת בסדר שרוב האנשים אף פעם לא משננים.
ה מחולל אנימציה CSS מסיר את הניחוש אתה בוחר תנועה מספריית הגדרות קבועות מראש, מתאים את משך הזמן, הקלה, עיכוב, ספירת איטרציות וכיוון, וצופה בה מתנגנת על אלמנט תצוגה מקדימה חיה הכלי כותב את שניהם @keyframes כלל וההתאמה animation קיצור לקופסה מוכנה להעתקה, כשהשמות כבר מסונכרנים, כך שהגוש שאתה מדביק עובד בפעם הראשונה.
TL;DR: אנימציית CSS מעבירה אלמנט דרך א
@keyframesרצף לאורך זמן, ובניגוד למעבר הוא לא צריך טריגר ויכול ללולאה. ה@keyframesשם והanimation-nameחייב להתאים בדיוק, וזו הסיבה הנפוצה ביותר שהנפשה לא עושה כלום הקיצור נושא שם, משך, תזמון-פונקציה, עיכוב, איטרציה-ספירה, כיוון ומצב מילוי העדיפו הנפשהtransformוopacityלתנועה חלקה ומרוכבת מחולל זה נותן לך ארבע עשרה הגדרות קבועות מראש, בקרת השמעה מלאה ותצוגה מקדימה חיה, ופולט גם את ה-keyframes וגם את הקיצור ביחד. זה פועל כולו בדפדפן שלך ללא הרשמה.
איזו בעיה פותר מחולל אנימציה CSS?
הדבר המביך באנימציית keyframe הוא הנסיעה הלוך ושוב. כדי לכוון הקפצה ביד אתה כותב את @keyframes כלל, כתוב את animation שורה, לשמור את הקובץ, לעבור לדפדפן, לחכות לטעינה מחדש, ולצפות.If the bounce is too aggressive you change one translateY ערך ועשה את כל הלולאה שוב. מכיוון שהמחזור הזה איטי, רוב האנשים מקבלים את הגרסה הראשונה שלא נראית שבורה ולא את הגרסה שמרגישה נכון, וההבדל בין שני אלה הוא בדיוק הליטוש שמפריד בין ממשק נחשב לתבנית.
גנרטור קורס את הלולאה הזו ללחיצה אחת. אתה בוחר הגדרה מראש, גורר את מחוון משך הזמן, ואלמנט התצוגה המקדימה מנגן את התנועה שלפניך מיד. החלף את פונקציית התזמון מ ease לעקומת בז'יר והשינוי בתחושה הוא מיידי הגדר את ספירת האיטרציות לאינסופיות ואת לולאות האנימציה כדי שתוכל ללמוד אותה לאחר כמה דקות של זה אתה בונה אינטואיציה לאיך שש מאות אלפיות שניות נראות מול שתים עשרה מאות, שזה החוש שאתה צריך לקבל החלטות תנועה טובות בכל מקום אחר.
יש גם טיעון נכונות אתה לא יכול לייצר פגום animation ערך על ידי בחירה מתוך תפריטים וגרירת מחוונים, ואתה לא יכול להקליד את שם ה-keyframe בצורה שגויה, מכיוון שהכלי קושר את הקיצור ל-keyframes שהוא יצר הפלט תמיד בטוח להדבקה. האמינות הזו היא אותה סיבה שאני שומר על בוני CSS חזותיים קרובים למאפיינים אחרים, אותו אינסטינקט מאחורי הגעה אל מחולל גרדיאנט במקום לספור צבע מפסיק בראש שלי, או את מחולל box-shadow במקום לנחש ברדיוסי טשטוש.
במה שונה אנימציית CSS ממעבר CSS?
זה מכשיל אנשים כל הזמן, אז כדאי לדייק מעבר מחייה תכונה בודדת בין שני מצבים ודורש משהו לשנות, ריחוף, פוקוס, מחלקה מוחלפת, לפני שהוא רץ יש לו ערך התחלה וערך סוף ואין שום דבר באמצע אנימציה, לעומת זאת, עוקבת אחרי א @keyframes כלל שיכול להגדיר כל מספר של שלבי ביניים, כך שהאלמנט יכול לעבור דרך כוריאוגרפיה שלמה ולא קו ישר מ-A ל-B. הוא גם לא מחכה לשום דבר: יישם אותו והוא מתנגן.
ההשלכה המעשית היא שאתה מושיט יד למעבר כאשר אתה רוצה להחליק שינוי מצב, ולאנימציה כאשר אתה רוצה תנועה שהיא מהותית לאלמנט כפתור שמתכהה בריחוף הוא מעבר ספינר שמסתובב לנצח, תג שפועם כדי למשוך את העין, או קלף שמחליק למעלה עם טעינת הדף הם כולם אנימציות, כי התנועה מתרחשת מעצמה ולעתים קרובות חוזרת על עצמה אם אתה עדיין מחליט איזה מהם צריך אפקט נתון, כלל האצבע הוא פשוט: אם פעולת משתמש מתחילה אותו והוא הולך לכיוון אחד, השתמש במעבר; אם הוא משחק בעצמו, לולאות או שיש לו יותר משני שלבים, השתמש באנימציה. ה מחולל מעבר CSS הוא הכלי הנלווה למקרה הראשון, והשניים מכסים את רוב התנועה שתכתוב אי פעם.
| אספקט | מעבר | אנימציה |
|---|---|---|
| טריגר | זקוק לשינוי מצב (ריחוף, מיקוד, כיתה) | מתחיל בפני עצמו בעת יישום |
| צעדים | שתיים, התחלה וסוף | כל מספר, באמצעות @keyframes |
| לולאה | לא, פועל פעם אחת בכל שינוי | כן, עם iteration-count |
| שימוש אופייני | אפקטי ריחוף ומיקוד | ספינרים, פולסים, כניסות |
מהו הסדר הנכון של קיצור האנימציה?
ה animation קיצור הוא צפוף הוא יכול לשאת את שם מסגרת המפתח, משך, תזמון-פונקציה, השהיה, איטרציה-ספירה, כיוון, מצב מילוי ומצב משחק, הכל על שורה אחת, והסדר חשוב לשני ערכי הזמן בדיוק כמו שהוא עושה למעברים המחולל הזה כותב את השם תחילה, לאחר מכן משך ותזמון-פונקציה, לאחר מכן ההשהיה האופציונלית, ואז איטרציה-ספירה, כיוון ומצב מילוי, למשל animation: fadeIn 0.6s ease 1 both. כתיבת השם תחילה היא חוקית מכיוון ששמות מסגרת מפתח אינם מילות מפתח CSS, והיא נקראת בצורה ברורה יותר מאשר קבורת השם בסוף.
הכלל האחד שתופס את כולם הוא שני ערכי הזמן משך הזמן וההשהיה הם שניהם פעמים, ו-CSS אומר להם בנפרד רק לפי מיקום: ערך הפעם הראשונה הוא משך הזמן והשני הוא ההשהיה כל השאר בקיצור הוא מילת מפתח או מספר חסר יחידה, ולכן אי אפשר לבלבל אותו עם זמן לכן הכלי יכול להפיל בבטחה את ההשהיה כאשר הוא אפס, כי חסר יחידה 1 או המילה infinite להלן ללא ספק ספירת האיטרציות, לא פעם שנייה. המחולל גם משמיט כל ערך השווה לברירת המחדל שלו ב-CSS, אז א normal כיוון או א none מצב מילוי אף פעם לא מבלבל את הפלט התוצאה היא קיצור שקורא את הדרך שבה היית כותב אותו ביד ברגע שידעת את הכללים.
למה אנימציית ה-CSS שלי לא מתנגנת?
זה הצוק, וכמעט כולם הולכים ממנו לפחות פעם אחת הסיבה היחידה הנפוצה ביותר היא חוסר התאמה בין ה animation-name והשם ב @keyframes כלל שגיאת הקלדה, הפרש אותיות רישיות או שם ששמו שונה במקום אחד ולא במקום השני מותיר לדפדפן אין כלל מסגרת מפתח להיקשר אליו, כך שהוא לא עושה כלום בשקט אין שגיאה ואין אזהרה; האלמנט פשוט יושב שם. מכיוון שהמחולל הזה כותב את שני החצאים יחד מאותו שם, כל המחלקה של הבאגים נעלמת, וזה חלק גדול מהנקודה.
את הסיבות האחרות כדאי לדעת כי הן מופיעות כאשר אתה כותב ביד אנימציות משך זמן של אפס אומר שהאנימציה מסתיימת באופן מיידי ואתה אף פעם לא רואה את זה אלמנט שהוא display: none לא מריץ את האנימציות שלו בכלל, אז דהייה שתלויה באלמנט המעובד לא תירה. מאפיין חסר או שגוי באיות בתוך מסגרת מפתח מתעלם בשקט ולא מסומן. ואנימציה עם animation-fill-mode: none, ברירת המחדל, מחזירה את האלמנט לסגנונות האחדות שלו ברגע שהוא מסתיים, מה שיכול להיראות כאילו הוא מעולם לא רץ אם התנועה הייתה עדינה. צפייה באנימציה בתצוגה מקדימה חיה מציגה את רוב אלה תוך שניות, וזה המקרה לבניית תנועה שבה אתה יכול לראות אותה ולא בקובץ שאתה ממשיך לטעון מחדש.
מה עושה מצב אנימציה-מילוי?
מצב מילוי הוא ההגדרה שאנשים מבינים אחרונה וצריכים ביותר. זה מחליט אילו סגנונות האלמנט מציג מחוץ לחלון הפעיל של אנימציה 's, הן לפני שהוא מתחיל במהלך עיכוב כלשהו והן לאחר סיומו. ברירת המחדל, none, פירושו שהאלמנט מתעלם מהפריים הראשון והאחרון כאשר האנימציה לא פועלת, אז הוא יושב בסגנונות הרגילים שלו לפני האנימציה וחוזר אליהם לאחר מכן. ההצמדה הזו היא המקור לתסכול נפוץ מאוד: אתה מחייה אלמנט כדי לדעוך פנימה, הוא דוהה פנימה יפה, ואז הוא נעלם שוב ברגע שהאנימציה מסתיימת, כי עם none הסופי opacity: 1 keyframe נמחק ברגע שהאנימציה מסתיימת.
התיקון הוא animation-fill-mode: forwards, ששומר על מסגרת המפתח האחרונה לאחר סיום האנימציה, כך שהאלמנט הדהוי נשאר גלוי. backwards מחיל את מסגרת המפתח הראשונה במהלך כל השהיה לפני תחילת האנימציה, וזה שימושי כאשר יש לך השהיה ואינך רוצה שהאלמנט יהבהב תחילה במצב ברירת המחדל שלו. both עושה את שניהם בבת אחת והיא הבחירה הכללית הבטוחה ביותר עבור אנימציות כניסה, וזו הסיבה שהמחולל הזה מגדיר ברירת מחדל של אנימציות חדשות both. הבנת מצב המילוי היא ההבדל בין כניסה שנוחתת לכזו שמתבטלת, והרבה יותר קל לתפוס אותה על ידי החלפתה בתצוגה מקדימה וצפייה בשינוי הסיום מאשר על ידי קריאת המפרט קר.
מתי צריכה לולאת אנימציה, ואיך אני שולט בה?
ספירת איטרציה מחליטה כמה פעמים האנימציה פועלת. הגדר אותו למספר שלם חיובי והאנימציה חוזרת על כך פעמים רבות ואז מפסיקה; הגדר אותו ל infinite וזה לולאות לנצח אנימציות לולאה הן הבחירה הנכונה עבור תנועה אמביינט, מתמשך, ספינר שמראה עבודה מתרחשת, דופק ששומר קריאה לפעולה בחיים, ציפה עדינה שנותנת תמונה גיבור קצת חיים אנימציות חד פעמי, לרוץ פעם אחת, הם עבור כניסות ויציאות, שבו התנועה יש התחלה ברורה וסוף וחוזר על זה יהיה להסיח את הדעת.
כיוון משתלב עם ספירת איטרציות כדי לעצב את אופן פעולת כל מעבר. ברירת המחדל normal מנגן כל איטרציה ממסגרת המפתח הראשונה ועד האחרונה. reverse משחק כל אחד אחורה. alternate מריץ את המעבר הראשון קדימה והאחורה הבאה, פינג-פונג בין נקודות הקצה, וכך אתה בונה דופק חלק הלוך ושוב מבלי להגדיר נסיעה חזרה במסגרות המפתח. alternate-reverse מתחיל אחורה ומתחלף משם המחולל חושף את כל הארבעה כך שאתה יכול להרגיש את ההבדל: דופק עם alternate נושם פנימה והחוצה באופן טבעי, בעוד אותם keyframes עם normal ומספר זוגי של צעדים צריכים לקודד את ההחזרה בעצמם. לתנועת לולאה, alternate כמעט תמיד מייצר את התוצאה האורגנית יותר עם פחות עבודת keyframe.
אילו מאפיינים עלי להנפיש לביצועים חלקים?
המאפיינים שאתה מחייה מחליטים אם התנועה פועלת בשישים פריימים חלקים בשנייה או מגמגמת, והבחירה זהה למעברים. לְהַעדִיף transform ו opacity. ניתן למסור את שניהם לקומפוזיטור ולהנפש מבלי שהדפדפן יחשב מחדש את פריסת העמוד, כך שהם נשארים חלקים גם בחומרה צנועה ותחת עומס. זו הסיבה שכרטיס שמחליק איתו transform: translateY מרגיש ללא מאמץ בזמן שאותו כרטיס מונפש עם top או margin-top מרגיש מחוספס כל כניסה מוגדרת מראש בגנרטור זה בנויה על transform ו opacity בדיוק מהסיבה הזאת.
המאפיינים שיש להימנע מהנפשה ברצף של מסגרת מפתח הם אלה שמפעילים פריסה: width, height, top, left, margin ו padding. שינוי כל אחד מאלה מאלץ את הדפדפן לחשב מחדש את הגיאומטריה של האלמנט וכל מה שמסביבו בכל פריים, וזה יקר והוא הגורם השכיח ביותר לאנימציה מטורפת, החמיר כאשר האנימציה עוברת לולאה ומשלמת את העלות הזו ברציפות. אם אתה רוצה שאלמנט יגדל, א transform: scale כמעט תמיד זול יותר מאשר להנפשה width ו height, וזה נראה כמעט זהה. הטיעון הרחב יותר להרכבת סט כלים שמנווטים אותך לעבר הנתיב הזול נמצא ב- ערכת כלים למפתחי אינטרנט יצירה, והרגלי זרימת העבודה שהופכים את התנועה להחלטה מהירה ולא איטית נמצאים ב כלי פרודוקטיביות למפתחים מדריך.
איך הגנרטור שומר על התצוגה המקדימה כנה?
כל בונה חזותי מסתכן בתצוגה המקדימה והקוד המיוצא מתרחקים עד שהכלי מלמד אותך ערך שלא ישחזר. גנרטור זה מזריק את המדויק @keyframes כלל שהוא מוציא לדף ומחיל את המדויק animation קיצור זה מראה לך את רכיב התצוגה המקדימה, כך שהתנועה שבה אתה צופה היא התנועה שה-CSS המועתק שלך יפיק. אין נתיב אנימציה נפרד שיכול לא להסכים, ושם מסגרת המפתח בתצוגה המקדימה הוא השם בפלט.
מכיוון שהאנימציה פועלת על הרכבה ואז מסתיימת, התצוגה המקדימה זקוקה לדרך להפעיל אותה מחדש, שהכלי מטפל בה על ידי הרכבה מחדש של אלמנט התצוגה המקדימה כאשר אתה לוחץ על הפעלה חוזרת. זה משקף את האופן שבו אנימציה חד פעמית מתנהגת בהפקה, שם היא מתנגנת כאשר האלמנט מופיע ואז מחזיקה במצבו הסופי בהתאם למצב המילוי. גם הפלט נשאר מינימלי, מוריד את ההשהיה האפסית וכל ערך ברירת מחדל כך שתעתיק רק הצהרות משמעותיות, אותה דיסציפלינה של פליטת שום דבר מיותר שעובר דרך מחולל מסנן CSS והבונים החזותיים האחרים. כאשר אתה מצמיד אנימציית keyframe עם פריסה הממקמת את האלמנט, ה מחולל flexbox מהווה בן לוויה טבעי לבניית המבנה שמסביב.
אילו דפדפנים תומכים באנימציות CSS?
אנימציות CSS נתמכות בכל דפדפן נוכחי וכבר הרבה יותר מעשור. ה @keyframes כלל, ה animation קיצור וכל הידיים הארוכות שלו הן אוניברסליות ולא מקודמות, כך שהפלט של מחולל זה עובד בכרום, פיירפוקס, ספארי ואדג' ללא קידומות ספק או נפילות. ההתייחסות הסופית היא מפרט CSS Animations Level 1 מה-W3C, שהוא המקור העיקרי לאופן שבו כל חלק בקיצור מתנהג, וכדאי לקרוא ברגע שהמחולל נתן לך תחושה פיזית למה שהחלקים עושים. לצורך נגישות, זכור שחלק מהמשתמשים מגדירים א prefers-reduced-motion העדפה, וזה נוהג טוב לעטוף אנימציית לולאה לא חיונית בשאילתת מדיה שמכבדת אותה, כך שניתן לכבות את תנועת הסביבה עבור אנשים שלא נוח להם.
אם אתה מרכיב קבוצה רחבה יותר של כלי CSS חזותיים, מחולל המעבר וה- מחולל טרנספורמציה CSS שב באופן טבעי לצד זה, מכיוון שטרנספורמציות הן חומר הגלם רוב האנימציות הללו נעות ומעברים מטפלים במצב שינויים אנימציות לא. הכל כאן פועל בצד הלקוח, וה-CSS שאתה מעתיק הוא שלך לשימוש ללא זמן ריצה, ללא שלב בנייה וללא תלות.
שאלות נפוצות
מהו מחולל אנימציה CSS?
מחולל אנימציה CSS הוא כלי ויזואלי שבונה אנימציה של keyframe מהגדרות שתבחר. אתה בוחר הגדרה מראש, מגדיר את משך הזמן, ההקלה, ההשהיה, ספירת האיטרציות והכיוון, והוא מוציא את @keyframes כלל וה animation קיצור יחד עם תצוגה מקדימה חיה אתה יכול לשחק מחדש.
מה ההבדל בין אנימציית CSS למעבר CSS?
מעבר מחייה שינוי בודד בין שני מצבים וצריך טריגר כמו ריחוף כדי לרוץ אנימציה עוקבת אחר א @keyframes רצף עם כל מספר שלבים, יכול לולאה ומתחיל בפני עצמו ברגע שהוא מוחל, מבלי לחכות לשינוי מצב.
באיזה סדר משתמש קיצור האנימציה?
כלי זה כותב את שם keyframe ראשון, לאחר מכן משך, תזמון-פונקציה, השהיה, איטרציה-ספירה, כיוון ומצב מילוי, למשל אנימציה: fadeIn 0.6s easy 1 both.The הראשון זמן הערך הוא תמיד משך הזמן והשני הוא השהיה, כך ערך זמן בודד נקרא כמשך הזמן.
איך אני עושה לולאת אנימציה CSS לנצח?
הגדר את ספירת האיטרציות לאינסופית בקיצור שהוא המילה אינסוף, כמו באנימציה: ספין 1s ליניארי אינסופי כל מספר שלם חיובי במקום חוזר על האנימציה שפעמים רבות ואז מפסיק לפי מצב המילוי והכיוון.
למה אנימציית ה-CSS שלי לא מתנגנת?
הסיבה השכיחה ביותר היא חוסר התאמה בין שם האנימציה לשם @keyframes, כולל שגיאת הקלדה או הפרש רישיות, מה שמותיר לדפדפן אין כלל להיקשר אליו. בדוק גם שמשך הזמן הוא מעל אפס ושהאלמנט מוצג, מכיוון שהאנימציה בתצוגה: אף אלמנט לא פועל.
מה עושה המאפיין מצב מילוי-אנימציה?
מצב מילוי מחליט אילו סגנונות האלמנט מראה לפני תחילת האנימציה ואחרי שהיא מסתיימת ברירת המחדל אף אחת לא מצמידה את האלמנט בחזרה לסגנונות הרגילים שלו כאשר האנימציה מסתיימת הגדרה קדימה שומרת על מסגרת המפתח הסופית, מחילה לאחור את מסגרת המפתח הראשונה במהלך השהיה, ושניהם עושים את שניהם.
אילו מאפיינים עלי להנפיש לביצועים חלקים?
מעדיף טרנספורמציה ואטימות הדפדפן יכול להנפיש אותם על הקומפוזיטור מבלי לחשב מחדש פריסה, כך שהם נשארים חלקים ב-60fps. הנפשת רוחב, גובה, עליון, שמאל או שוליים מאלצת חישוב מחדש של פריסה על כל פריים, וזו הסיבה הרגילה לכך שהאנימציה מגמגמת.
האם האנימציה שנוצרה CSS חינמית ובטוחה לשימוש?
כן הכלי חינמי לחלוטין ללא מגבלות הרשמה או שימוש, והוא פולט CSS סטנדרטי ללא קידומת הנתמך בכל דפדפן מודרני כל העיבוד מתרחש בדפדפן שלך, כך ששום דבר לא מועלה והכלי עובד במצב לא מקוון לאחר הטעינה.
