css animation animation-composition

✔️ animation-composition CSS Style Property

המאפיין animation-composition מציין את הפעולה המרוכבת לשימוש כאשר מספר אנימציות משפיעות על אותו מאפיין בו זמנית

הערה: כאשר אתה מציין מספר ערכים מופרדים בפסיקים על מאפיין אנימציה-*, הם יחולו על ההנפשות בסדר שבו מופיעים שמות ההנפשה. אם מספר האנימציות והקומפוזיציות שונה, הערכים הרשומים במאפיין animation-composition יעברו במחזוריות מהשם הראשון עד האחרון של האנימציה, ויעברו לולאה עד שלכל האנימציות יהיה ערך של קומפוזיציה אנימציה. למידע נוסף, ראה הגדרת ערכי מאפייני הנפשה מרובים.

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

Demo Panel:
CSS:
HTML:
Syntax:

Valid values:
  • replace, add, accumulate, revert, revert-layer, unset, inherit, initial

Js Syntax: element.style.animationComposition

תאימות דפדפנים

animation-composition
הערך שנבדקChromeFirefoxEdgeCOpera
add✔️✔️✔️✔️
replace✔️✔️✔️✔️
accumulate✔️✔️✔️✔️
revert✔️✔️✔️✔️
revert-layer✔️✔️✔️✔️
unset✔️✔️✔️✔️
inherit✔️✔️✔️✔️
initial✔️✔️✔️✔️