css @keyframes

✔️ @keyframes CSS Style Property

המאפיין @keyframes הכלל @keyframes מציין את קוד האנימציה.

האנימציה נוצרת על ידי שינוי הדרגתי מסט אחד של סגנונות CSS לאחר.

במהלך האנימציה, אתה יכול לשנות את סט סגנונות ה-CSS פעמים רבות.

ציין מתי שינוי הסגנון יתרחש באחוזים, או עם מילות המפתח "מאת" ו"אל", שזהה ל-0% ו-100%. 0% הוא ההתחלה של האנימציה, 100% הוא כאשר האנימציה הושלמה.

טיפ: לקבלת התמיכה הטובה ביותר בדפדפן, עליך להגדיר תמיד גם את הבוררים של 0% וגם את ה-100%.

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

הערה: הכלל !important מתעלם במסגרת מפתח (ראה דוגמה אחרונה בדף זה).

דוגמא:

Demo Panel:
cssguide
CSS: 111
HTML: 222
Syntax:

\@keyframes animationname {keyframes-selector {css-styles;}}

Valid values:
Js Syntax: element.style.@keyframes

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