אנימציות של גבולות CSS

כמה דרכים ליצור אנימציה של גבול ב-CSS

Bramus

הגדרת גבולות

יש כמה שיטות להגדיר גבול לרכיב: border,‏ outline ו-box-shadow. כפי שמפורט במאמר The 3 CSS Methods for Adding Element Borders (3 השיטות ב-CSS להוספת גבולות לאלמנטים) מאת סטפני אקלס, לכל גישה יש יתרונות וחסרונות משלה, במיוחד כשמדובר בהוספת אנימציה לגבולות. הסיבה העיקרית לא להשתמש ב-border תקין של CSS היא למטרות אנימציה.

אנימציות של גבולות באמצעות outline-offset מאת קווין ג'. Powell

מאמר שמשך את תשומת הלב שלי לאחרונה הוא אנימציה פנטסטית של גבולות CSS, שבו המחבר Coco בדק אפשרויות נוספות. הם מוסיפים תוכן שנוצר באמצעות ::before ו-::after כדי ליצור גבול מלאכותי, ואז מוסיפים לו אנימציה.

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

אנימציות של גבולות באמצעות תוכן שנוצר על ידי Coco

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

שמירה על מודל התיבה

חיסרון אחד של שימוש בתוכן שנוצר כדי לחקות גבול הוא שאתם מקבלים מודל תיבה שבור: התוכן יכול עכשיו להסתיר את הגבול המזויף כי ה"גבול" הזה מצויר מתחת. כדי לצמצם את הסיכון, צריך להחיל את border-width הרצוי בתור padding.

כדי ליצור גבול אמיתי – וכך לשמור על פעולת מודל התיבה – אתם יכולים להשתמש בכמה רקעים ואז למתוח אותם לאזור הגבול.

העקרונות הבסיסיים

נתחיל ביצירת גבול מנוקד והוספת כמה רקעים.

/* Size of the border */
--border-size: 0.5rem;

/* Create a dotted border */
border: var(--border-size) dotted lime;

/* Create two background layers:
   1. A white semi-transparent
   2. A layer with the colored boxes
 */
background-image:
  linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),

  conic-gradient(
    from 45deg,
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  )
;

התאמת הרקעים באמצעות background-origin

כמו שאפשר לראות, יש משהו מוזר ברקעים כאן: הם מצוירים בתוך הגבול, אבל נראה שה-conic-gradient לא נכון. למעשה, זו ההתנהגות המיועדת: כברירת מחדל, תמונות רקע לא נמתחות עד לגבולות, כי המקור שלהן הוא ה-padding-box של הרכיב. כדי ליצור גבול, תמונות הרקע שהוגדרו חוזרות על עצמן בגבול עצמו, וכך נוצר האפקט החזותי המוזר.

כדי לפתור את הבעיה, צריך למתוח את הרקע כך שיתפוס גם את הגודל של הגבול. אפשר לעשות את זה ידנית על ידי מתיחה ושינוי המיקום של הרקע, אבל הכי טוב להשתמש במאפיין background-origin כדי להתאים את גודל הרקע ל-border-box.

Browser Support

• 1
• 12
• 4
• 3

Source

מה אסור לעשות

/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);

מה מומלץ לעשות

background-origin: border-box;

התוספת הזו משפרת את המראה של כל התמונה:

הקטנת שכבת הרקע הלבן באמצעות background-clip

עכשיו, כשהרקעים תופסים את כל המקום, צריך לכווץ שוב את השכבה השקופה למחצה. במקום להתעסק שוב עם background-size, יש דרך קלה יותר לעשות את זה: משתמשים ב-background-clip ומגדירים אותו ל-padding-box. כך הרקע לא משורטט מתחת לאזור של הגבול.

Browser Support

• 1
• 12
• 4
• 5

Source

background-clip:
  padding-box, /* Clip white semi-transparent to the padding-box */
  border-box /* Clip colored boxes to the border-box (default) */
;

לבסוף, כדי לקבל את האפקט המלא, משנים את הגבול ל-transparent.

border: 0.3rem dotted transparent;

Animation

כדי לשחזר את האנימציה של הגבול, אפשר לשנות את זווית ההתחלה של conic-gradient.

--angle: 0deg;
conic-gradient(
  from var(--angle),
  #d53e33 0deg 90deg,
  #fbb300 90deg 180deg,
  #377af5 180deg 270deg,
  #399953 270deg 360deg
);

הודות ל-‎@property, זה קל מאוד בדפדפנים שתומכים בו:

Browser Support

• 85
• 85
• 128
• 16.4

Source

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

כשמשלבים את כל החלקים, הקוד נראה כך:

תוכן בונוס: border-image

גישה שסקרנו בעבר ליצירת גבול עם מעבר צבעים היא להשתמש ב-CSS border-image.

Browser Support

• 16
• 12
• 15
• 6

Source

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

/* Create a border */
border: 0.5rem solid transparent;

/* Paint an image in the border */
border-image:
  conic-gradient(
    from var(--angle),
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  ) 1
;

עם זאת, יש כמה דברים שלא יעבדו בגישה הזו:

• ה-border-image לא עוקב אחרי ה-border-radius, הוא תמיד יישאר מלבני.
• כשמגדירים את border-image-slice למילוי, border-image לא נצבע מתחת ל-background שהוגדר אלא מעליו. זה יכול להיות בעייתי אם רוצים שהרקע יהיה שקוף למחצה.

לסיכום

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