Bagaimana untuk melaksanakan berbilang kesan peralihan CSS

Question

Ini adalah soalan yang agak mudah, tetapi saya tidak menemui dokumentasi yang baik tentang sifat peralihan CSS. Berikut ialah coretan CSS:

.nav a
{
    text-transform:huruf besar;
    text-decoration:none;
    warna:#d3d3d3;
    garis-ketinggian: 1.5em;
    saiz fon:.8em;
    paparan:blok;
    text-align:center;
    bayang teks: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-peralihan: warna .2s linear;
    peralihan: warna .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    peralihan: teks-bayang .2s linear;
}

.nav a:hover
{
    warna:#F7931E;
    bayang teks: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

Seperti yang anda lihat, sifat peralihan saling menimpa satu sama lain. Pada masa ini, bayangan teks bernyawa, tetapi warnanya tidak. Bagaimanakah saya boleh menjadikannya bernyawa pada masa yang sama? Terima kasih atas sebarang jawapan.

Answer 1

Sunting: Saya teragak-agak untuk memadamkan siaran ini. Dari segi memahami sintaks CSS, adalah baik untuk memberitahu orang ramai bahawa all wujud, dan bergantung pada struktur CSS, mungkin lebih baik daripada sejuta pengisytiharan berasingan. Sebaliknya, ia bolehmempunyai penalti prestasi, walaupun saya tidak melihat sebarang data untuk menyokong hipotesis ini. Saya akan meninggalkannya buat masa ini, tetapi saya harap orang ramai menyedari ia adalah jalan dua hala.

Catatan asal:

Anda juga boleh menggunakan kod berikut:

.nav a {
    transition: all .2s;
}

FWIW: Jika tidak dinyatakan, all是默认的，所以transition: .2s; ialah lalai, jadi transition: .2s; juga boleh mencapai kesan yang sama.

Answer 2

Dalam semua pelayar yang menyokong kesan peralihan, atribut peralihan dipisahkan dengan koma:

.nav a {
  transition: color .2s, text-shadow .2s;
}

ease 是默认的时间函数，所以你不需要指定它。如果你真的想要 linear, anda perlu menyatakan dengan jelas:

transition: color .2s linear, text-shadow .2s linear;

Ini mula berulang, jadi jika anda akan menggunakan fungsi masa dan masa yang sama pada berbilang sifat, lebih baik menggunakan pelbagai sifat transition-* dan bukannya trengkas:

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;