כיצד להשתמש CSS3 מעברים & אנימציות כדי להדגיש UI שינויים

מעצבים ואמנים יש היסטוריה ארוכה של ניסויים עם תנועה, אפקטים, סוגים שונים של אשליות במטרה להוסיף שכבה נוספת לעבודה שלהם. התנועה לאמנות החלו להשתמש באשליות אופטיות בשנות ה -60 כדי לתת את הרושם של תנועה.

מאז צצו גישות חדשות וחדשות יותר, כגון האמנות הקינטית הפופולרית לאחרונה, המרחיבה את נקודת המבט של הצופה באמצעות תנועה רב-ממדית. Motion הופיע גם במדעי המחשב עם המצאת הסמן המהבהב הראשון ב -1967.

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

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

מעברים

מעברים ואנימציות משמשים שניהם לדמיין שינויים במדינה של אלמנט HTML על ידי שינוי אחד או יותר מתכונות CSS שלו.

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

שינוי תכונות CSS של קישור בריחוף (או מיקוד, או לחיצה) הוא הצורה הישנה והפשוטה ביותר של מעברים, והיא קיימת הרבה לפני עידן CSS3.

 א צבע: כתום;  א: העבר את העכבר color: red;  a: focus color: blue;  a: Visit color: green; 

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

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

1. תמיד יש להם התחלה וסוף המדינה.
2. המדינות בין נקודות ההתחלה והסיום מוגדרות במרומז על ידי הדפדפן, אנחנו לא יכולים לשנות את זה עם CSS.
3. הם דורשים הפעלה מפורשת, כגון הוספת pseudoclass חדש על ידי CSS, או מחלקה חדשה על ידי jQuery.

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

אנימציות

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

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

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

הדברים החשובים ביותר שאתה צריך לדעת על אנימציות CSS3 כוללים:

1. הם אינם דורשים הפעלה מפורשת, הם יכולים להתחיל לטעון את הדף או כאשר אירוע DOM אחר מתרחש בדפדפן
2. ניתן להשתמש בהם במקרים בהם נעשה שימוש במעברים, למשל כאשר מחלקה או פסבדו-קלאס חדשים מתווספים או מוסרים (אם כי מדובר במקרה שכיח פחות)
3. הם דורשים מאיתנו להגדיר כמה keyframes (מדינות ביניים)
4. אנו יכולים לציין את המספר, את התדירות ואת הסגנון של keyframes אלה

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

אלה מחלקות חדשות הם אנימציה עם שצוין @keyframes כללים בקובץ CSS. הכיתות הנוספות מוסרות על ידי jQuery כאשר המשתמש לוחץ על הלחצן בפעם הבאה, והתפריט מסתתר שוב.

תכונות CSS ו @keyframes על כלל

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

עבור אנימציות יש את אנימציה נכס קצרנות בידיים שלנו אשר מייצג לא פחות מ 8 תכונות אנימציה אחת, כלומר שם האנימציה, משך האנימציה, אנימציה-תזמון-פונקציה, עיכוב בהנפשה, אנימציה- iteration לספור, כיוון אנימציה, אנימציה מצב מילוי, ו אנימציה- Play המדינה.

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

 .אלמנט רקע: כתום; מעבר-רכוש: רקע; משך מעבר: 3 שניות; פונקציית המעבר-תזמון: הקלות;  .element: רחף background: red; 

ציינו את רקע כללי רכוש, כי זה מה ישתנה במהלך המעבר.

אנו יכולים לשנות יותר מאפיין CSS אחד במעבר אחד, במקרה זה הקוד לעיל ישתנה כך: מעבר-רכוש: רקע, גבול;. אנחנו יכולים גם להשתמש מאפיינים-המעבר you all;, אם איננו רוצים לציין כל נכס בנפרד.

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

 .אלמנט רקע: כתום; מעבר: רקע 3s הקלות;  .element: רחף background: red; 

אם אנחנו רוצים ליצור אנימציה, אנו נדרשים לציין את הרלוונטיות keyframes. יש לשנות את מאפייני ה- CSS בהגדרה נפרדת @keyframes בכללים. הנה דוגמה לאופן שבו אנו יכולים לעשות זאת:

 .אלמנט position: relative; animation-name: שקף; משך האנימציה: 3s; animation-time-function: הקלות;  @ שקפים ב- keyframes 0% left: 0;  50% left: 200px;  100% left: 400px; 

בדוגמה לעיל יצרנו אפקט הזזה פשוטה מאוד. הגדרנו את שם האנימציה, ואז מאוגד 3 keyframes אליו אנו שצוין @ שקופית של שקפים ... בכללים. האחוזים מתייחסים משך האנימציה, כך 50% קורה ב 1.5s בדוגמה.

נוכל להשתמש בקיצור אנימציה רכוש גם, או יכול להגדיר את keyframes עם יותר פשוט מ ל כלל בדרך הבאה:

 .אלמנט position: relative; אנימציה: שקופית 3s הקלות;  @keyframes slide מתוך left: 0;  אל left: 400px; 

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

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

CSS3 אנימציות ומעברים עבד עם תחיליות הספק במשך זמן רב, שבו אנחנו לא צריכים להשתמש יותר, אבל רשת המפתחים של Mozilla עדיין ממליץ להוסיף את -WebKit קידומת לזמן מה, כמו התמיכה בדפדפנים מבוססי Webkit רק לאחרונה השיגה יציבות.