Прелаз - ЦСС-трикови | ЦСС Алманац 2025

transitionСвојство је скраћеница својство се користи за представљање до четири транзиционе релатед руком својства:

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

Ова својства преласка омогућавају елементима да мењају вредности током одређеног трајања, анимирајући промене својстава, уместо да се оне одмах догоде. Ево једноставног примера који преноси боју позадине елемента на: ховер:

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

Том див ће требати пола секунде када миш пређе преко њега да би прешао из црвене у зелену. Ево демонстрације такве транзиције уживо:

Погледајте демо о транзицији оловке Лоуиса Лазариса (@импрессивевебс) на ЦодеПен-у.

Можете одредити одређено својство као што смо горе навели или користити вредност „све“ да бисте се позвали на својства прелаза.

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; )

Редослед вредности углавном није важан - осим ако није одређено кашњење. Ако наведете кашњење, прво морате навести трајање. Прва вредност коју прегледач препозна као важећу временску вредност увек ће представљати трајање. Све наредне важеће временске вредности биће рашчлањене као кашњење.

Нека својства не могу бити премештена јер нису анимирана својства. Погледајте спецификацију за потпуну листу карактеристика која се могу анимирати.

Одређивањем прелаза на самом елементу, дефинишете прелаз у оба смера. Односно, када се стилови промене (нпр. Када задржите показивач миша), њихова својства ће се пребацити, а када се стилови промене (нпр. Када пређете курсором), прећи ће. На пример, следећи демо прелази при преласку мишем, али не и при искључивању показивача миша:

Погледајте оловку Зохгт Лоуиса Лазариса (@импрессивевебс) на ЦодеПен-у.

То се догађа зато што је прелаз премештен у :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; )

ИЕ10 (прва стабилна верзија ИЕ која подржава transition) не захтева -ms-префикс.

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.