Tốc ký chuyển tiếp CSS với nhiều thuộc tính?

Tôi dường như không thể tìm thấy cú pháp chính xác cho tốc ký chuyển tiếp CSS với nhiều thuộc tính. Điều này không làm gì cả:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

Tôi thêm lớp hiển thị với javascript. Các yếu tố trở nên cao hơn và có thể nhìn thấy, nó chỉ không chuyển tiếp. Thử nghiệm trong Chrome, FF và Safari mới nhất.

Tôi đang làm gì sai?

EDIT: Để rõ ràng, tôi đang tìm phiên bản tốc ký để thu nhỏ CSS của tôi. Nó đủ lớn với tất cả các tiền tố của nhà cung cấp. Cũng mở rộng mã ví dụ.

Cú pháp:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

Lưu ý rằng thời lượng phải đến trước độ trễ, nếu sau này được chỉ định.

Chuyển tiếp cá nhân kết hợp trong tuyên bố tốc ký:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

Hoặc chỉ chuyển đổi tất cả:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

Đây là một ví dụ đơn giản . Đây là một cái khác với tài sản chậm trễ .

Chỉnh sửa: trước đây được liệt kê ở đây là sự tương thích và các vấn đề đã biết liên quan transition. Loại bỏ để dễ đọc.

Dòng dưới cùng: chỉ cần sử dụng nó. Bản chất của tài sản này là không phá vỡ đối với tất cả các ứng dụng và khả năng tương thích hiện cao hơn 94% trên toàn cầu.

Nếu bạn vẫn muốn chắc chắn, hãy tham khảo http://caniuse.com/css-transitions

Nếu bạn có một số thuộc tính cụ thể mà bạn muốn chuyển đổi theo cùng một cách (vì bạn cũng có một số thuộc tính mà bạn đặc biệt không muốn chuyển đổi, giả sử opacity), một tùy chọn khác là thực hiện một cái gì đó như thế này (tiền tố bỏ qua cho ngắn gọn):

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

Tuyên bố thứ hai ghi đè lên phần allkhai báo tốc ký phía trên nó và làm cho (đôi khi) mã ngắn gọn hơn.

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}

<p>Hover box for demo</p>
<div class="box"></div>

Bản giới thiệu

Tôi làm việc với điều này:

element{
   transition : height 3s ease-out, width 5s ease-in;
}

Bằng cách có độ trễ 0,5 giây khi chuyển đổi thuộc tính độ mờ, phần tử sẽ hoàn toàn trong suốt (và do đó không nhìn thấy được) trong toàn bộ thời gian chiều cao của nó đang chuyển đổi. Vì vậy, điều duy nhất bạn thực sự sẽ thấy là độ mờ thay đổi. Vì vậy, bạn sẽ nhận được hiệu ứng tương tự như để thuộc tính chiều cao ra khỏi quá trình chuyển đổi:

"chuyển tiếp: độ mờ .5s .5s;"

Đó có phải là những gì bạn muốn? Nếu không, và bạn muốn xem quá trình chuyển đổi chiều cao, bạn không thể có độ mờ bằng 0 trong toàn bộ thời gian mà nó đang chuyển đổi.

Điều này giúp tôi hiểu / sắp xếp hợp lý, chỉ những gì tôi cần để làm động:

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

~ Điều này áp dụng cho tất cả các thuộc tính chuyển đổi (thời lượng, chức năng chuyển thời gian, v.v.) trong lớp '.base'

Tôi nghĩ rằng làm việc với điều này:

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;