Peralihan - Trik CSS | CSS Almanac 2025

The transitionharta adalah harta trengkas digunakan untuk mewakili sehingga empat sifat tulisan tangan peralihan berkaitan:

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

Sifat peralihan ini membolehkan elemen mengubah nilai dalam jangka masa yang ditentukan, menghidupkan perubahan harta benda, dan bukannya berlaku segera. Berikut adalah contoh mudah yang mengubah warna latar elemen pada: arahkan:

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

Div itu akan memakan masa setengah saat apabila tetikus di atasnya berubah dari merah ke hijau. Berikut adalah demonstrasi langsung peralihan seperti itu:

Lihat Demo Peralihan Pen oleh Louis Lazaris (@impressivewebs) di CodePen.

Anda boleh menentukan harta tertentu seperti yang kita ada di atas, atau menggunakan nilai "semua" untuk merujuk kepada sifat peralihan.

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

Dalam contoh di atas, kedua-dua latar belakang dan padding akan beralih, kerana nilai "semua" yang ditentukan untuk transition-propertybahagian singkatan.

Anda boleh koma set nilai yang terpisah untuk melakukan peralihan yang berbeza pada sifat yang berbeza:

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

Sebahagian besarnya, urutan nilai tidak penting - melainkan jika kelewatan ditentukan. Sekiranya anda menentukan kelewatan, anda mesti menentukan jangka masa terlebih dahulu. Nilai pertama yang dikenali oleh penyemak imbas sebagai nilai masa yang sah akan selalu mewakili jangka masa. Sebarang nilai masa yang sah akan dihuraikan sebagai kelewatan.

Beberapa sifat tidak dapat dialihkan kerana mereka bukan sifat animasi. Lihat spesifikasi untuk senarai penuh sifat-sifat yang boleh dianimasikan.

Dengan menentukan peralihan pada elemen itu sendiri, anda menentukan peralihan yang akan berlaku di kedua arah. Maksudnya, ketika gaya diubah (misalnya pada hover on), sifatnya akan beralih, dan ketika gaya berubah kembali (misalnya ketika hover off) mereka akan beralih. Contohnya, peralihan demo berikut pada hover, tetapi tidak pada hover off:

Lihat zohgt Pen oleh Louis Lazaris (@impressivewebs) di CodePen.

Ini berlaku kerana peralihan telah dipindahkan ke :hoverpemilih keadaan dan tidak ada peralihan yang sesuai pada pemilih yang menargetkan elemen secara langsung tanpa :hoverkeadaan.

Untuk keserasian dalam semua penyemak imbas yang menyokong, awalan vendor diperlukan, dengan sintaks standard yang dinyatakan terakhir:

.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 (versi stabil pertama IE yang disokong transition) tidak memerlukan -ms-awalan.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.