Przejście - CSS-Tricks | Almanach CSS 2025

transitionWłaściwość jest właściwością skrótem używane do reprezentowania aż do czterech właściwości odręcznie przejściowych związanych:

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

Te właściwości przejścia umożliwiają elementom zmianę wartości w określonym czasie, animując zmiany właściwości, zamiast natychmiastowego ich wystąpienia. Oto prosty przykład, który zmienia kolor tła elementu na: hover:

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

Ten element div zajmie pół sekundy, gdy wskaźnik myszy nad nim zmieni kolor z czerwonego na zielony. Oto demonstracja na żywo takiego przejścia:

Zobacz demo Pen Transition autorstwa Louisa Lazarisa (@impressivewebs) na CodePen.

Możesz określić konkretną właściwość, tak jak mamy powyżej, lub użyć wartości „all” w odniesieniu do właściwości przejścia.

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

W powyższym przykładzie, zarówno tło, jak i wypełnienie ulegną zmianie z powodu wartości „all” określonej dla transition-propertyczęści skrótu.

Możesz przecinać oddzielne zestawy wartości, aby wykonywać różne przejścia dla różnych właściwości:

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

W większości przypadków kolejność wartości nie ma znaczenia - chyba że określono opóźnienie. Jeśli określisz opóźnienie, musisz najpierw określić czas trwania. Pierwsza wartość, którą przeglądarka rozpozna jako prawidłową wartość czasu, zawsze będzie reprezentować czas trwania. Każda kolejna ważna wartość czasu zostanie przeanalizowana jako opóźnienie.

Niektórych właściwości nie można przenieść, ponieważ nie są one animowanymi właściwościami. Zobacz specyfikację, aby uzyskać pełną listę właściwości, które można animować.

Określając przejście na samym elemencie, definiujesz przejście w obu kierunkach. Oznacza to, że kiedy style zostaną zmienione (np. Po najechaniu kursorem), ich właściwości ulegną zmianie, a kiedy style się z powrotem zmienią (np. Po najechaniu kursorem), przejdą. Na przykład następujące przejścia demonstracyjne po najechaniu kursorem, ale nie po najechaniu kursorem:

Zobacz Pen zohgt autorstwa Louisa Lazarisa (@impressivewebs) na CodePen.

Dzieje się tak, ponieważ przejście zostało przeniesione do :hoverselektora stanu i nie ma pasującego przejścia na selektorze, który jest przeznaczony bezpośrednio dla elementu bez :hoverstanu.

Aby zapewnić zgodność we wszystkich obsługiwanych przeglądarkach, wymagane są prefiksy dostawców, ze standardową składnią zadeklarowaną jako ostatnia:

.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 (pierwsza stabilna wersja IE do obsługi transition) nie wymaga -ms-prefiksu.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.