CSS свойството transition
е общото свойство за transition-property
, transition-duration
, transition-timing-function
и transition-delay
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Източникът за този интерактивен пример се съхранява в GitHub. Ако желаете да допринесете към проекта за интерактивния пример, моля клонирайте https://github.com/mdn/interactive-examples и ни изпратете запитване за pull.
Преходите ви позволяват да определите преминаването между две състояния на елемент. Различните състояния могат да бъдат зададени чрез псево класове като :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> || <easing-function> || <time>
where
<single-transition-property> = all | <custom-ident>
<easing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(
[0,1]>, <number>, [0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
Примери
Има няколко примера за CSS преходи в статията Използване на CSS Преходи .
Спецификации
Спецификация | Статут | Коментар |
---|---|---|
CSS Transitions The definition of 'transition' in that specification. |
Working Draft | Първоначална дефиниция |
Initial value | as each of the properties of the shorthand: |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
Съвместимост с браузъри
BCD tables only load in the browser