Prechod - Triky CSS | Almanach CSS 2025

Táto transitionvlastnosť je skratková vlastnosť, ktorá sa používa na reprezentáciu až štyroch dlhodobých vlastností súvisiacich s prechodom:

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

Tieto vlastnosti prechodu umožňujú prvkom meniť hodnoty počas stanoveného času, animovať zmeny vlastností namiesto toho, aby k nim došlo okamžite. Tu je jednoduchý príklad, ktorý zmení farbu pozadia prvku na: hover:

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

Tomu divu bude trvať pol sekundy, keď nad ním prejdete, kým sa zmení z červenej na zelenú. Tu je živá ukážka takéhoto prechodu:

Prezrite si ukážku prechodu na pero od Louisa Lazarisa (@impressivewebs) na stránke CodePen.

Môžete špecifikovať konkrétnu vlastnosť, ako je uvedené vyššie, alebo použiť hodnotu „všetko“ na označenie vlastností prechodu.

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

V tomto vyššie uvedenom príklade dôjde k prechodu pozadia aj výplne kvôli hodnote „všetko“ určenej pre transition-propertyčasť skratky.

Môžete oddeliť čiarky samostatnými množinami hodnôt, aby ste mohli vykonať rôzne prechody na rôznych vlastnostiach:

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

Z väčšej časti nezáleží na poradí hodnôt - pokiaľ nie je určené oneskorenie. Ak zadáte oneskorenie, musíte najskôr určiť trvanie. Prvá hodnota, ktorú prehliadač rozpozná ako platnú hodnotu času, bude vždy predstavovať trvanie. Akákoľvek následná platná hodnota času sa bude analyzovať ako oneskorenie.

Niektoré vlastnosti nemožno previesť, pretože nejde o animovateľné vlastnosti. Celý zoznam vlastností, ktoré sú animovateľné, nájdete v špecifikácii.

Zadaním prechodu na samotnom prvku definujete prechod, ktorý sa má uskutočniť v oboch smeroch. To znamená, že keď sa zmenia štýly (napr. Pri zapnutí kurzora myši), ich vlastnosti sa prevedú a pri zmene štýlov späť (napr. Pri vypnutom hovere) sa prevedú zmeny. Napríklad nasledujúce ukážkové prechody pri prechode kurzorom myši, ale nie pri prechode kurzorom myši preč:

Prezrite si Pen zohgt od Louisa Lazarisa (@impressivewebs) na stránkach CodePen.

Stáva sa to preto, že prechod bol presunutý do :hoverselektora stavu a na selektore nie je žiadny zodpovedajúci prechod, ktorý by zacielil na prvok priamo bez :hoverstavu.

Kvôli kompatibilite vo všetkých podporovaných prehľadávačoch sú vyžadované predpony dodávateľov so štandardnou syntaxou deklarovanou ako posledná:

.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 (prvá stabilná verzia IE, ktorá podporuje transition) nevyžaduje -ms-predponu.

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.