Bagaimana cara melakukan beberapa transisi CSS pada suatu elemen?

Ini pertanyaan yang cukup mudah tetapi saya tidak dapat menemukan dokumentasi yang sangat bagus tentang properti transisi CSS. Berikut ini cuplikan CSS:

    .nav a
{
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover
{
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

Seperti yang Anda lihat, properti transisi saling menimpa. Seperti berdiri, teks-bayangan akan hidup, tetapi bukan warnanya. Bagaimana cara membuat mereka berdua hidup secara bersamaan? Terima kasih atas jawaban apa pun.

Properti transisi dibatasi koma di semua browser yang mendukung transisi:

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

easeadalah fungsi pengaturan waktu default, jadi Anda tidak perlu menentukannya. Jika Anda benar-benar ingin linear, Anda harus menentukannya:

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

Ini mulai berulang-ulang, jadi jika Anda akan menggunakan waktu dan fungsi pengaturan waktu yang sama di beberapa properti, lebih baik Anda melanjutkan dan menggunakan berbagai transition-*properti alih-alih singkatan:

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

Anda juga dapat secara signifikan dengan:

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

Sesuatu seperti berikut ini akan memungkinkan untuk beberapa transisi secara bersamaan:

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

Contoh: http://jsbin.com/omogaf/2

Jika Anda membuat semua properti beranimasi sama, Anda dapat mengatur masing-masing secara terpisah yang memungkinkan Anda untuk tidak mengulangi kode.

 transition: all 2s;
 transition-property: color, text-shadow;

Ada lebih banyak di sini: singkatan transisi CSS dengan beberapa properti?

Saya akan menghindari penggunaan properti semua (properti transisi menimpa 'semua'), karena Anda dapat berakhir dengan perilaku yang tidak diinginkan dan hit kinerja yang tidak terduga.

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

Ini adalah mixin yang KURANG untuk mentransisikan dua properti sekaligus:

.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) {
 -webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
    -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
      -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
          transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
}

Dimungkinkan untuk membuat beberapa transisi diatur dengan nilai yang berbeda untuk fungsi durasi, waktu tunda dan waktu. Untuk membagi berbagai transisi gunakan,

button{
  transition: background 1s ease-in-out 2s, width 2s linear;
  -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}

Referensi: https://kolosek.com/css-transition/

Dimungkinkan juga untuk tidak menentukan properti secara keseluruhan.

#box {
  transition: 0.4s;
  position: absolute;
  border: 1px solid darkred;
  bottom: 20px; left: 20px;
  width: 200px; height: 200px;
  opacity: 0;
}

#box.on {
  opacity: 1;
  height: 300px;
  width: 500px;
 }