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

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

 

בחלון הזה אתם יכולים לראות כל מיני דוגמאות להוברים ואני דיי בטוח שרובכם דיי אהבתם. זה בהחלט מוסיף לחוויה.

אז אילו אפשרויות יש לנו עם אנימציות ומעברי עכבר:

 

1. תזוזה (transform) - מאפשר לנו להזיז את האלמנט למעלה, למטה, ימינה, שמאלה, לסובב, להזיז על ציר הX ועל ציר הY.
2. מעברים (transition) - מאפשר לנו ליצור משך גדילה או הקטנה של תגית. גדליה מהירה למעלה, למטה ולצדדים. גם אפשר לקבוע את קצב הגדילה, תחילה הגדילה מהירה ואז איטית ולהיפך. אפשר גם לבצע דיליי כך שלפני שהאנימציה תתרכש, יהיה דיליי של X זמן ואז האנימציה תעבוד. כמו כן אפשר לשלב את הפונקציה של תזוזה(transform) עם מעברים ואפשר לעשות דברים מגניבים לדוגמה:

 

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