css transition

✔️ transition CSS Style Property

המאפיין transition הוא מאפיין קיצור עבור:

השהיית מעבר: 0 שניות
משך מעבר: 0 שניות
נכס-מעבר: הכל
תזמון-מעבר: קלות

הערה: ציין תמיד את מאפיין המעבר-משך, אחרת משך הזמן הוא 0s, ולמעבר לא תהיה השפעה.

דוגמא: הגדרת אפקט מעבר

Demo Panel:
CSS: 111
HTML: 222
Syntax:

transition: property duration timing-function delay | initial | inherit;

Valid values:
  • all, linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, jump-start, jump-end, jump-none, jump-both, start, end, normal, allow-discrete, none, revert, revert-layer, unset, inherit, initial


Units: s, ms


Js Syntax: element.style.transition

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

transition
הערך שנבדקChromeFirefoxEdgeCOpera
all 2s ease 1s✔️✔️✔️✔️
all✔️✔️✔️✔️
linear✔️✔️✔️✔️
ease✔️✔️✔️✔️
ease-in✔️✔️✔️✔️
ease-out✔️✔️✔️✔️
ease-in-out✔️✔️✔️✔️
step-start✔️✔️✔️✔️
step-end✔️✔️✔️✔️
jump-start✔️✔️✔️✔️
jump-end✔️✔️✔️✔️
jump-none✔️✔️✔️✔️
jump-both✔️✔️✔️✔️
start✔️✔️✔️✔️
end✔️✔️✔️✔️
revert✔️✔️✔️✔️
revert-layer✔️✔️✔️✔️
unset✔️✔️✔️✔️
inherit✔️✔️✔️✔️
initial✔️✔️✔️✔️