1.8 אנימציות ומעברים תרגול

תרגול אנימציות ומעברים¶

תרגיל 1 - כפתור עם אפקט hover¶

צרו כפתור עם אפקטי hover חלקים:

דרישות:
- הכפתור משנה צבע רקע ב-hover
- הכפתור מתרחב קצת (scale(1.05)) ב-hover
- הכפתור מקבל צל גדול יותר ב-hover
- כל השינויים עם transition חלק (0.3 שניות)
- הוסיפו גם אפקט active (כשלוחצים) - הכפתור מתכווץ קצת (scale(0.95))
- שימוש ב-transform בלבד, לא width/height

תרגיל 2 - ספינר טעינה¶

צרו ספינר טעינה (loading spinner) עם אנימציה:

דרישות:
- עיגול עם border בצבע בהיר ו-border-top בצבע אחר
- אנימציה של סיבוב אינסופי (infinite)
- שימוש ב-linear כ-timing function (סיבוב במהירות קבועה)
- משך סיבוב: 0.8 שניות
- מרכזו את הספינר באמצע המסך
- בונוס: הוסיפו טקסט "loading..." מתחת לספינר עם אנימציית פעימה (opacity)

תרגיל 3 - כרטיס הפיכה - Flip Card¶

צרו כרטיס שמתהפך כשמרחפים עליו:

דרישות:
- לכרטיס שני צדדים - קדמי ואחורי
- הצד הקדמי: תמונה או צבע עם שם
- הצד האחורי: טקסט עם מידע נוסף
- ב-hover הכרטיס מתהפך ב-180 מעלות סביב ציר Y
- שימוש ב-perspective על המיכל לאפקט 3D
- שימוש ב-backface-visibility: hidden על שני הצדדים
- שימוש ב-transform-style: preserve-3d על הכרטיס
- transition חלק של 0.6 שניות

טיפ למבנה:

<div class="flip-container">
  <div class="flip-card">
    <div class="flip-front">front</div>
    <div class="flip-back">back</div>
  </div>
</div>

תרגיל 4 - אנימציית Fade-In¶

צרו קטע עם כמה אלמנטים שמופיעים בזה אחר זה:

דרישות:
- הגדירו keyframes של fadeInUp (משקיפות 0 ותזוזה למטה, לשקיפות 1 ומיקום מקורי)
- 4 כרטיסים שכל אחד מופיע עם עיכוב שונה (stagger effect)
- הכרטיס הראשון: delay 0.1s, השני 0.2s, השלישי 0.3s, הרביעי 0.4s
- השתמשו ב-animation-fill-mode: forwards כדי שהכרטיסים ישארו גלויים
- השתמשו ב-:nth-child() להגדרת העיכובים
- האנימציה צריכה לרוץ פעם אחת בלבד

צרו תפריט צד שמחליק פנימה:

דרישות:
- תפריט צדדי שמתחיל מחוץ למסך (ימין או שמאל)
- כפתור (checkbox trick) שמפעיל את ההחלקה
- כשפותחים: התפריט מחליק בצורה חלקה לתוך המסך
- כשסוגרים: חוזר בצורה חלקה למיקום המקורי
- שימוש ב-transform: translateX() ולא ב-left/right (ביצועים)
- transition של 0.4 שניות עם ease-in-out
- רקע שקוף-כהה (overlay) שמופיע מאחורי התפריט

תרגיל 6 - אפקט Skeleton Loading¶

צרו אפקט skeleton loading - "שלד" של תוכן שמנצנץ בזמן טעינה:

דרישות:
- צרו כרטיס עם placeholder-ים אפורים במקום תוכן אמיתי:
- מלבן אפור במקום תמונה
- פסים אפורים קצרים במקום כותרת
- פסים אפורים ארוכים במקום טקסט
- אנימציית "נצנוץ" - gradient שזז מצד לצד:
- הגדירו background gradient ב-keyframes
- השתמשו ב-background-size גדול יותר מהאלמנט
- אנימציה של background-position מצד לצד
- אנימציה אינסופית, 1.5 שניות לכל מחזור

תרגיל 7 - כדור קופץ - Bouncing Ball¶

צרו אנימציה של כדור שקופץ:

דרישות:
- עיגול צבעוני שמייצג כדור
- אנימציית keyframes עם לפחות 4 שלבים:
- 0% - למעלה
- 50% - למטה (על "הרצפה")
- 55% - דחיסה קלה (scale: כווץ אנכית, התרחב אופקית)
- 100% - חזרה למעלה
- שימוש ב-animation-direction: alternate לאפקט חלק
- שימוש ב-timing function כמו ease-in לנפילה (מאיץ כלפי מטה) ו-ease-out לעליה (מאט כלפי מעלה)
- הוסיפו צל מתחת לכדור שמשתנה לפי המרחק מהרצפה (גדול וחלש כשהכדור למעלה, קטן וחזק כשלמטה)
- אנימציה אינסופית