css animation

✔️ animation CSS Style Property

המאפיין animation מגדיר תכונות מאפייני הנפשה (אנימציה) בין סגנונות. שולט על משך הנפשה תזמון הנפשה השהיית הנפשה חזרה על הנפשה כיוון הנפשה מצב מילוי הנפשה ומצב ההפעלה של הנפשה.
מאפיין זה שולט על מאפיינים animation-name , animation-duration , animation-timing-function , animation-delay , animation-iteration-count , animation-direction , animation-fill-mode , animation-play-state

הערה: יש לציין תמיד את מאפיין animation-duration אחרת משך הזמן הוא 0 ולעולם לא יופעל.
מאפיין זה פועל יחד עם @keyframes

דוגמא: שינוי מאפייני האנימציה השונים

Demo Panel:
CSS:
HTML:
Syntax:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Valid values:
  • linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end
  • normal, reverse, alternate, alternate-reverse
  • none, forwards, backwards, both
  • paused, running
  • myframe1, myframe2, myframe3, none


Units: s, ms


Js Syntax: element.style.animation

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

animation
הערך שנבדקChromeFirefoxEdgeCOpera
3s linear 2s 2 alternate both running keyframename✔️✔️✔️✔️
linear✔️✔️✔️✔️
ease✔️✔️✔️✔️
ease-in✔️✔️✔️✔️
ease-out✔️✔️✔️✔️
ease-in-out✔️✔️✔️✔️
step-start✔️✔️✔️✔️
step-end✔️✔️✔️✔️
normal✔️✔️✔️✔️
reverse✔️✔️✔️✔️
alternate✔️✔️✔️✔️
alternate-reverse✔️✔️✔️✔️
none✔️✔️✔️✔️
forwards✔️✔️✔️✔️
backwards✔️✔️✔️✔️
both✔️✔️✔️✔️
paused✔️✔️✔️✔️
running✔️✔️✔️✔️
myframe1✔️✔️✔️✔️
myframe2✔️✔️✔️✔️
myframe3✔️✔️✔️✔️