אנימציות בסיסיות | CSS

[מוטי אורן]

מדריך ליצירת אנימציות בסיסיות באמצעות CSS

--

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

בשביל לשלוט בזמן של מעבר אלמנט כלשהו ממצב כלשהו למצב אחר, נניח שהאלמנט div נמצא במצב שהרוחב שלו הוא 100 פיקסלים ואנחנו רוצים שבמעבר של העכבר עליו על ידי המשתמש, הרוחב שלו יגדל באיטיות ל – 250 פיקסלים, נשתמש בתכונה transition.

div {
  width: 100px;
}
div:hover {
  width: 250px;
}

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

div {
  width: 100px;
  transition: width 2s;
}
div:hover {
  width: 250px;
}

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

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

div {
  background: red;
  transition: background 2s;
}
div:hover {
  background: green;
}

מקווה שהתחביר מובן.

ניתן להשהות את כניסת האנימציה לפעולה על ידי התכונה transition-delay.

div {
  background: red;
  transition: background 2s;
  transition-delay: 1s;
}
div:hover {
  background: green;
}

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

ל – transform ישנן אפשרויות רבות, נסקור את חלקם.

בשביל לשנות את המיקום יחסית למיקום הנוכחי, נשתמש ב – translate כמו בדוגמה:

div {
  transition: transform 2s;
  transition-delay: 1s;
}
div:hover {
  transform: translate(50px, 80px);
}

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

בשביל לסובב את האלמנט, נשתמש ב – rotate כדלהלן:

div {
  transition: transform 2s;
  transition-delay: 1s;
}
div:hover {
  transform: rotate(25deg);
}

rotate מקבלת כפרמטר את מידת הסיבוב במעלות (deg), במקרה שלנו נתנו 25 מעלות סיבוב.

בשביל להגדיל או להקטין את האלמנט, נשתמש ב – scale:

div {
  transition: transform 2s;
  transition-delay: 1s;
}
div:hover {
  transform: scale(2, 3);
}

scale מקבלת כפרמטר את מידת ההגדלה יחסית לגודל המקורי. שזה אומר, שהאלמנט יגדל ברוחבו פי 2 מהגודל המקורי, ובגובהו פי 3.

בדרך זו אפשר להקטין אלמנט על ידי שימוש באפס כמו בדוגמה:

div {
  transition: transform 2s;
  transition-delay: 1s;
}
div:hover {
  transform: scale(0.3, 0.7);
}

בשביל להקטין את ציר ה – y או את ציר ה – x בלבד, נצטרך להשתמש ב – scaleY ו – scaleX.

בשביל לעקם את האלמנט, נשתמש ב – skew.

div {
  transition: transform 2s;
  transition-delay: 1s;
}
div:hover {
  transform: skew(50deg, 80deg);
}

הפרמטר הראשון קובע את העקומה (במעלות) בציר ה – x, והשני בציר ה – y. גם כאן ניתן להתייחס ספציפית ל – x או ל – y על ידי המתודות skewX ו – skewY.

אפשר להשתמש בכולם על ידי שנותנים ערכים שלהם לפי הסדר למתודה matrix:

div {
  transition: transform 2s;
  transition-delay: 1s;
}
div:hover {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

הסדר של הפרמטרים הוא כדלקמן:

• scaleX
• skewY
• skewX
• scaleY
• translateX
• translateY

[AVI KLAINE]

@מוטי-אורן
מדריך ברור ומושקע