CSS свойството transition е общото свойство за transition-property, transition-duration, transition-timing-function и transition-delay.
Източникът за този интерактивен пример се съхранява в GitHub. Ако желаете да допринесете към проекта за интерактивния пример, моля клонирайте https://github.com/mdn/interactive-examples и ни изпратете запитване за pull.
Преходите ви позволяват да определите преминаването между две състояния на елемент. Различните състояния могат да бъдат зададени чрез псево класове като :hover или :active или динамично зададени чрез JavaScript.
/* За 1 свойство */
/* За 2 свойства */
/* За всички променени свойства */
/* Глобални стойности */
Свойството transition се задава като един или повече прехода, всеки от които е за отделно свойство, разделени чрез запетая.
Всеки преход за отделните свойства описва преходът, който трябва да бъде приложен на съответното свойство(или на специалните стойности all и none). Това включва:
нито една или една стойност, представляваща свойство върху което да се приложи прехода. Може да бъде всяко от следните:
ключовата дума none
ключовата дума all
упоменаване на CSS свойство <custom-ident> .
<single-transition-timing-function> нито една или една стойност, представляваща времевата функция, която да се употребява
нито една, една или две стойности <time>. Първата стойност, която може да бъде парсната като време се задава на transition-duration а втората, която може да бъде парсната като време, се задава на transition-delay.
Вижте, как се употребяват списъците от стойности на свойства, когато са с различна дължина. Накратко, ако има повече описания на прехода, отколкото реалния брой на свойствата за анимиране, то тези излишни описания се пренебрегват.
Официален синтаксис
Има няколко примера за CSS преходи в статията Използване на CSS Преходи .
The definition of 'transition' in that specification. Working Draft Първоначална дефиниция
Таблицата за съвместимост на тази страница е генерирана от структурирани данни. Ако желаете да допринесете, моля, посетете https://github.com/mdn/browser-compat-data и ни изпратете запитване за pull .
No support No Full support 12 No support No Full support 10 No support No No support No No support No ? Full support Yes No support No No support No No support No No support No
CSS преходи
Допринесли за тази страница: petya5q2
Последно обновяване от: petya5q2, 19.05.2018 г., 14:36:40