CSS свойството  transition  е общото свойство за transition-property, transition-duration, transition-timing-function и transition-delay.

Преходите ви позволяват да определите преминаването между две състояния на елемент. Различните състояния могат да бъдат зададени чрез псево класове като :hover или :active или динамично зададени чрез JavaScript.

Синтаксис

/* За 1 свойство */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* За 2 свойства */
transition: margin-right 4s, color 1s;

/* За всички променени свойства */
transition: all 0.5s ease-out;

/* Глобални стойности */
transition: inherit;
transition: initial;
transition: unset;

Свойството transition се задава като един или повече прехода, всеки от които е за отделно свойство, разделени чрез запетая.

Всеки преход за отделните свойства описва преходът, който трябва да бъде приложен на съответното свойство(или на специалните стойности all и none). Това включва:

  • нито една или една стойност, представляваща свойство върху което да се приложи прехода. Може да бъде всяко от следните:
    • ключовата дума none
    • ключовата дума all
    • упоменаване на CSS свойство <custom-ident> .
  •  <single-transition-timing-function> нито една или една стойност, представляваща времевата функция, която да се употребява
  • нито една, една или две стойности <time>. Първата стойност, която може да бъде парсната като време се задава на transition-duration а втората, която може да бъде парсната като време, се задава на transition-delay.

Вижте, как се употребяват списъците от стойности на свойства, когато са с различна дължина. Накратко, ако има повече описания на прехода, отколкото реалния брой на свойствата за анимиране, то тези излишни описания се пренебрегват.

Официален синтаксис

<single-transition>#

where
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

where
<single-transition-property> = all | <custom-ident>
<single-transition-timing-function> = <single-timing-function>

where
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>

where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

Примери

Има няколко примера за CSS преходи в статията Използване на CSS Преходи .

Спецификации

Спецификация Статут Коментар
CSS Transitions
The definition of 'transition' in that specification.
Working Draft Първоначална дефиниция

Initial valueas each of the properties of the shorthand:
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Mediainteractive
Computed valueas each of the properties of the shorthand:
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

Съвместимост с браузъри

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 26
Full support 26
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 57, transitions do not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified (see bug 726550).
Notes Before Firefox 57, cancelling a filling animation (for example, with animation-fill-mode: forwards set) can trigger a transition set on the same element, although only once (see bug 1192592 and these test cases for more information).
Notes Before Firefox 57, the background-position property can't be transitioned between two values containing different numbers of <position> values, for example background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (see bug 1390446).
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 12.1
Full support 12.1
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 10.1 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari Full support 6.1
Full support 6.1
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support Yes
Full support Yes
Full support 2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 26
Full support 26
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 57, transitions do not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified (see bug 726550).
Notes Before Firefox 57, cancelling a filling animation (for example, with animation-fill-mode: forwards set) can trigger a transition set on the same element, although only once (see bug 1192592 and these test cases for more information).
Notes Before Firefox 57, the background-position property can't be transitioned between two values containing different numbers of <position> values, for example background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (see bug 1390446).
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1
Full support 12.1
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 10.1 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS Full support Yes
Full support Yes
Full support 3.2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Gradients
Experimental
Chrome No support NoEdge Full support 12Firefox No support NoIE Full support 10Opera No support NoSafari No support NoWebView Android No support NoChrome Android ? Edge Mobile Full support YesFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Вижте също

Етикети за документа и сътрудници

Допринесли за тази страница: petya5q2
Последно обновяване от: petya5q2,