התחבר הצטרף עכשיו 🚀
מודול: אנימציות וטרנזישנים קורס: CSS – עיצוב ומבנה רספונסיבי

אנימציות וטרנזישנים - פרויקט מודרך

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

יש להתחבר למערכת.

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

התחברות

בפרויקט הזה בונים Animated UI Kit קטן: כרטיס עם Hover “מרים”, לינק עם underline אנימטיבי, Toast שנכנס עם Fade+Slide (Keyframes), Loader מסתובב, וכפתור “לחיץ” עם hover/active. תוך כדי מתרגלים transition-*, transform (translate/rotate/scale/skew + בונוס matrix) ו־@keyframes.

טעימה מהצעדים במיני-פרויקט

זו רק הצצה לשלבים הראשונים. ביצוע מלא נפתח אחרי התחברות.
1

שלב 1: Transition בסיסי (properties + duration)

  1. פתח/י את css-animations-transitions-start/index.html בדפדפן.
  2. ב-css-animations-transitions-start/css/styles.css הוסף/י ל-.btn transition (למשל: transform, filter, box-shadow).
  3. הוסף/י ל-.card טרנזישן על transform ו-box-shadow.
2

שלב 2: תכונות טרנזישנים (timing-function + delay)

3

שלב 3: translate

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

כבר יש לך משתמש? התחבר ותוכל להמשיך מאיפה שעצרת במודולים ובמיני-פרויקטים.
Skip to content