אנימציות בדף אינטרנט יכולות למשוך יותר משתמשים. שאל את עצמך את זה - אם היית רואה דף אינטרנט שיש בו לא מעט אנימציה, לא היית רוצה לחקור יותר? כעת, עם מעברי CSS תוכלו להפוך את עבודתכם לחיים עם כמה אנימציות נהדרות. ושים לב, אלה צריכים להיעשות נכון. בואו לחקור את עולם המעברים של CSS לפי הסדר הבא:
מדוע מעברי CSS?
בוא ניקח מופע. אם היית משנה את צבעו של אלמנט מלבן לכחול, שינוי זה כמעט מיידי. לקבלת אפקט מונפש יותר, אתה יכול לגרום לשינוי זה לקרות בהדרגה. זה נראה די מושך מבחינה ויזואלית. על ידי הפעלת מעברי CSS, תוכל להתאים אישית את אופן התרחשות השינויים. ניתן להגדיר כיצד השינויים באלמנטים מתרחשים במרווחי זמן ספציפיים העוקבים אחר עקומת תאוצה.
מעברי CSS מאפשרים לך להגדיר את השינויים עבור אלמנטים, מרווחי הזמן הספציפיים, מהירות עקומת התאוצה ועוד ועוד. אתה יכול לעשות את כל זה בלי להשתמש ב- Flash או JavaScript .
להבנה טובה יותר, אתה יכול להתייחס לתמונה למטה:
כיצד להשתמש בשירות כעת
בתמונה למעלה, אלמנט ה- HTML ישתנה מאדום לכחול תוך שנייה אחת. תוכלו לראות גם את צבע הביניים כאשר המעבר מתרחש. אם אינך מתכוון להשתמש במעברי CSS, תבחין כי השינוי בצבע מאדום לכחול הוא מיידי - לא תראה את צבע הביניים. עם מעברי CSS, תבחין בהשפעה מונפשת כאשר אלמנטים ה- HTML משתנים מהמצב הישן למצב החדש.
נכס המעבר
אתה יכול להשתמש במאפיין המעבר הקצר כדי לשלוט על מעברי CSS. השימוש בקיצור זה הוא לא רק קל, אלא הוא גם יכול להימנע מפרמטרים שאינם מסונכרנים שיכולים להיות די מתסכלים לניפוי באגים ב- CSS.
מאפיין המעבר מציין את מאפייני CSS אליהם תרצו את אפקט המעבר. רק מאפייני CSS אלה מונפשים.
תחביר:
מַעֲבָר:
כמתחיל, אתה עלול להיתקל בקשיים בשימוש בקיצור. אם אתה חושב ששימוש בקיצור הוא מעט מורכב עבורך כרגע, אתה יכול לציין את מאפייני המעבר בנפרד. עבור אלמנט HTML, תוכל לציין את מאפייני המעבר בזה אחר זה כמוצג בדוגמה הבאה:
div {רוחב: 100 פיקסלים גובה: 100 פיקסלים רקע: אור כחול-נכס מעבר: רוחב מעבר-משך: 2s מעבר-תזמון-פונקציה: עיכוב מעבר ליניארי: 1}} div: רחף {רוחב: 300 פיקסלים}רחף מעל הקופסה
בדוגמה שלעיל ציינו את המאפיינים (מאפיין מעבר, משך מעבר, פונקציית תזמון מעבר ועיכוב מעבר) ואת ערכיהם בנפרד. נלמד על תכונות מעבר אלה בקרוב.
מה אתה צריך לציין?
יש בעיקר שני דברים שאתה צריך לציין כדי ליצור מעברי CSS: מאפיין CSS שרוצה להוסיף אפקט ומשך הזמן של אפקט זה.עליך לזכור דבר אחד - כאשר אינך מציין את משך הזמן, המעבר יקבל ערך ברירת מחדל של 0 , ולא תהיה שום השפעה.
בואו ניקח בחשבון דוגמא:
הקוד שלמטה מגדיר אפקט מעבר של מאפיין רוחב למשך חמש שניות.
div {רוחב: 100px גובה: 100px רקע: מעבר כחול: רוחב 5s} div: רחף {רוחב: 600px}הזז את הסמן מעל אלמנט div למעלה כדי לראות את אפקט המעבר.
בקוד הנ'ל תראה שכאשר אתה מעביר את הסמן מעל התיבה הכחולה, התיבה הכחולה מגדילה את רוחבה בהדרגה למשך זמן של חמש שניות. תבחין גם שכאשר תסיר את הסמן מהתיבה הכחולה, התיבה הכחולה תחזור לגודלה המקורי בהדרגה (לא באופן מיידי). תוכל גם לשנות את הערכים למשך רוחב ומשך זמן כדי לראות כיצד מאפיין מעבר זה משפיע על אלמנט ה- HTML.
ניתן גם להוסיף את אפקט המעבר ליותר ממאפיין אחד. אתה יכול לעשות זאת באמצעות פסיקים כדי להפריד בין המאפיינים. בואו ניקח בחשבון דוגמא:
בקוד שלמטה, מאפיין המעבר מוגדר לרוחב, לגובה ולשינוי.
div {ריפוד: 15px רוחב: 150px גובה: 100px רקע: מעבר ירוק: רוחב 2s, גובה 2s, transform 2s} div: רחף {רוחב: 300px גובה: 200px transform: סובב (360deg)} שלום עולם (רחף מעלי)
__בעצמו)
בדוגמה שלעיל, תראה כיצד התיבה הירוקה נעה כאשר אתה מרחף מעל התיבה.
ציינו רק את הנכס ומשך הזמן. בואו נראה את הפרמטרים האחרים עם דוגמאות שונות.
מאפיין פונקציית פונקצית העיתוי
מאפיין זה מגדיר את עקומת המהירות לאפקט המעבר. זה יכול לקחת את הערכים הבאים:
- ערך קלות: זהו ערך ברירת המחדל שבו ההשפעה איטית בהתחלה, ואז מהירה יותר ומסתיימת לאט.
- ערך לינארי: השפעה זו אינה משתנה במהירות המעבר - היא שומרת על עקביות מההתחלה ועד הסוף.
- ערך קלות: השפעה זו מתחילה לאט.
- ערך קלות: להשפעה זו סוף איטי.
- ערך קלות-ביציאה: להשפעה זו התחלה איטית כמו גם איטית.
- ערך מעוקב מעוקב (n, n, n, n): אתה יכול לציין את ערכת הערכים שלך בפונקציה קוביית bezier.
הקוד שלהלן מציג את השפעות המעבר לערכים ליניאריים, קלות, קלות, נינוחות וקלות כניסה.
div {רוחב: 100 פיקסלים גובה: 100 פיקסלים רקע: ורוד מעבר: רוחב 2s} # div1 {מעבר-תזמון-פונקציה: ליניארי} # div2 {מעבר-תזמון-פונקציה: קלות} # div3 {מעבר-תזמון-פונקציה: הקלות } # div4 {מעבר-תזמון-פונקציה: הקלה החוצה} # div5 {מעבר-תזמון-פונקציה: הקלות-החוצה} div: רחף {רוחב: 300 פיקסלים}העבר את העכבר מעל רכיבי ה- div למטה
לינארי
קַלוּת
קלות פנימה
קלות החוצה
קלות החוצה
נכס המעבר-עיכוב
לפעמים אתה רוצה שהנפשה תתרחש לאחר משך זמן מסוים. המאפיין עיכוב מעבר מאפשר לך לציין את העיכוב לאפקט מעבר. ניתן לציין את העיכוב בשניות.
בואו ניקח דוגמא כדי לראות את העיכוב באפקט המעבר:
div {רוחב: 100 פיקסלים גובה: 100 פיקסלים רקע: מעבר צהוב: רוחב 3 עיכוב מעבר: 1 שניות} div: רחף {רוחב: 300 פיקסלים}העבר את העכבר מעל רכיב ה- div למטה
הערה: אתה יכול לראות את העיכוב של שנייה אחת לפני תחילת האפקט
בקוד שלמעלה, כשתעבור עם העכבר מעל התיבה הצהובה, תבחין (למשך שנייה אחת) שאין שום השפעה. לאחר המתנה של שנייה אחת תבחין בהשפעה.
כיצד להשתמש בכוחות בג'אווה - -
עם זאת, אנו מגיעים לסוף מאמר זה של CSS Transitions. באפשרותך להוסיף אנימציות לדפי האינטרנט שלך כעת. נסה את הדוגמאות האלה.
בדוק את שלנו שמגיע עם הדרכה חיה בהנחיית מדריך וניסיון פרויקט אמיתי. הכשרה זו גורמת לך להיות בקיאים במיומנויות לעבוד עם טכנולוגיות אינטרנט מקדימות וקדמיות. הוא כולל הדרכה בנושא פיתוח אתרים, jQuery, Angular, NodeJS, ExpressJS ו- MongoDB.
יש לך שאלה עבורנו? אנא הזכיר זאת במדור התגובות בבלוג 'מעבר CSS' ונחזור אליך.