Làm thế nào để có nhiều chuyển tiếp CSS trên một phần tử?

Đây là một câu hỏi khá đơn giản nhưng tôi không thể tìm thấy tài liệu rất tốt về các thuộc tính chuyển tiếp CSS. Đây là đoạn mã 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);
}

Như bạn có thể thấy, các thuộc tính chuyển tiếp được ghi đè lên nhau. Khi nó đứng, bóng văn bản sẽ hoạt hình, nhưng không phải màu sắc. Làm thế nào để tôi có được cả hai để đồng thời sinh động? Cảm ơn cho bất kỳ câu trả lời.

Thuộc tính chuyển tiếp được phân cách bằng dấu phẩy trong tất cả các trình duyệt hỗ trợ chuyển đổi:

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

easelà chức năng thời gian mặc định, vì vậy bạn không phải chỉ định nó. Nếu bạn thực sự muốn linear, bạn sẽ cần chỉ định nó:

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

Điều này bắt đầu trở nên lặp đi lặp lại, vì vậy nếu bạn sẽ sử dụng cùng thời gian và chức năng thời gian trên nhiều thuộc tính thì tốt nhất nên tiếp tục và sử dụng các transition-*thuộc tính khác nhau thay vì tốc ký:

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

Bạn cũng có thể chỉ đơn giản là đáng kể với:

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

Một cái gì đó như sau sẽ cho phép nhiều lần chuyển đổi cùng một lúc:

-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;

Ví dụ: http://jsbin.com/omogaf/2

Nếu bạn làm cho tất cả các thuộc tính hoạt hình giống nhau, bạn có thể đặt riêng từng thuộc tính sẽ cho phép bạn không lặp lại mã.

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

Có nhiều hơn về nó ở đây: tốc ký chuyển tiếp CSS với nhiều thuộc tính?

Tôi sẽ tránh sử dụng tất cả các thuộc tính (thuộc tính chuyển tiếp ghi đè 'tất cả'), vì bạn có thể kết thúc bằng hành vi không mong muốn và các lần truy cập hiệu suất không mong muốn.

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

Đây là một mixin LESS để chuyển đổi hai thuộc tính cùng một lúc:

.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;
}

Có thể thực hiện nhiều hiệu ứng chuyển tiếp với các giá trị khác nhau cho thời lượng, độ trễ và chức năng thời gian. Để phân chia các chuyển tiếp khác nhau sử dụng,

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

Tham khảo: https://kolosek.com/css-transition/

Cũng có thể tránh chỉ định các thuộc tính hoàn toàn.

#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;
 }