ניתן ליצור, לשנות ולמחוק מעברי CSS3 באמצעות החלונית CSS Transitions.

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

ניתן לבחור להוסיף את קוד ה-CSS שנוצר למסמך הנוכחי או לציין קובץ CSS חיצוני.

יצירה והחלה של אפקט מעבר של CSS3

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

  2. בחר Window >‏ CSS Transitions.

  3. לחץ על .

  4. צור מחלקת מעברים באמצעות האפשרויות בתיבת הדו-שיח New Transition.

    Target Rule

    הזן שם לבורר. הבורר יכול להיות בורר CSS מכל סוג שהוא, כגון תג, כלל, מזהה או בורר מורכב. לדוגמה, אם ברצונך להוסיף אפקטי מעבר לכל התגים מסוג  <hr>‎, הזן את הערך hr

    Transition On

    בחר מצב שעליו ברצונך להחיל את המעבר. לדוגמה, אם ברצונך להחיל את המעבר כשהעכבר עובר מעל הרכיב, השתמש באפשרות Hover.

    Use the Same Transition for All Properties

    בחר באפשרות זו אם ברצונך לציין ערכים זהים עבור Duration‏, Delay‏, ו-Timing Function לכל מאפייני CSS שבהם ברצונך להשתמש במעברים.

    Use a Different Transition for Each Property

    בחר באפשרות זו אם ברצונך לציין ערכים שונים עבור Duration‏, Delay‏, ו-Timing Function לכל מאפיין CSS שבו ברצונך להשתמש במעבר.

    Property

    לחץ על  כדי להוסיף מאפיין CSS למעבר.

    Duration

    הזן משך זמן בשניות (s) או באלפיות השנייה (ms) עבור אפקט המעבר.

    Delay

    הזמן, בשניות או באלפיות שנייה, לפני תחילת אפקט המעבר.

    Timing function

    בחר סגנון מעבר מבין האפשרויות הזמינות.

    End Value

    ערך הסיום של אפקט המעבר. לדוגמה, אם ברצונך להגדיל את הגופן ל-‎40px בסוף אפקט המעבר, ציין ‎40px עבור מאפיין גודל הגופן.

    Choose Where To Create The Transition

    להטבעת הסגנון במסמך הנוכחי, בחר This Document Only.

    אם ברצונך ליצור גיליון סגנונות חיצוני עבור קוד CSS3, בחר New Style Sheet File. בעת הלחיצה על Create Transition, אתה מתבקש לספק מיקום לשמירת קובץ ה-CSS החדש. לאחר יצירת גיליון הסגנונות, הוא נוסף לתפריט Choose Where To Create Transition.

עריכת אפקטי מעבר של CSS3

  1. בחלונית CSS Transitions, בחר את אפקט המעבר שברצונך לערוך.

  2. לחץ על  .

  3. השתמש בתיבת הדו-שיח Edit Transition כדי לשנות ערכים שהוזנו בעבר עבור המעבר.

השבתת תחביר מקוצר של CSS עבור מעברים

  1. בחר Edit >‏ Preferences.

  2. בחר CSS Styles.

  3. תחת Use Shorthand For, בטל את הבחירה של Transition.


עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת