Преход - CSS-трикове | CSS алманах 2025

В transitionимота е съкращение имот, който се използва за представяне на до четири свързаните с преход longhand свойства:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Тези свойства на прехода позволяват на елементите да променят стойности за определена продължителност, анимирайки промените на свойствата, вместо да ги настъпват незабавно. Ето един прост пример, който прехвърля цвета на фона на елемент върху: hover:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Този div ще отнеме половин секунда, когато мишката над него се превърне от червено в зелено. Ето демонстрация на живо за такъв преход:

Вижте демонстрацията на Pen Transition от Louis Lazaris (@impressivewebs) на CodePen.

Можете да посочите конкретно свойство, както имаме по-горе, или да използвате стойност „всички“, за да се отнесете към свойствата на прехода.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

В този по-горе пример и фонът, и подложката ще преминат, поради стойността „всички“, посочена за transition-propertyчастта от стенограмата.

Можете да отделяте набори от стойности със запетая, за да правите различни преходи за различни свойства:

div ( transition: background 0.2s ease, padding 0.8s linear; )

В по-голямата си част редът на стойностите няма значение - освен ако не е посочено забавяне. Ако посочите закъснение, първо трябва да посочите продължителност. Първата стойност, която браузърът разпознава като валидна стойност на времето, винаги ще представлява продължителността. Всяка следваща валидна стойност на времето ще бъде анализирана като забавяне.

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

Като посочвате прехода на самия елемент, вие дефинирате прехода да се извършва в двете посоки. Тоест, когато стиловете се променят (напр. При задържане на курсора на мишката), техните свойства ще преминат, а когато стиловете се променят обратно (напр. При задържане на курсора на мишката) те ще преминат. Например, следните демонстрационни преходи при задържане на курсора на мишката, но не и при изключване:

Вижте Pen zohgt от Louis Lazaris (@impressivewebs) на CodePen.

Това се случва, защото преходът е преместен в :hoverселектора на състоянието и няма селектиращ преход на селектора, който насочва елемента директно без :hoverсъстоянието.

За съвместимост във всички поддържащи браузъри се изискват префикси на доставчици, като стандартният синтаксис е деклариран последен:

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

IE10 (първата стабилна версия на IE, която се поддържа transition) не изисква -ms-префикса.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.