Skrót CSS o wielu właściwościach?

Nie mogę znaleźć poprawnej składni dla stenografii przejścia CSS z wieloma właściwościami. To nic nie robi:

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

Dodaję klasę show za pomocą javascript. Element staje się wyższy i widoczny, po prostu się nie zmienia. Testowanie w najnowszych przeglądarkach Chrome, FF i Safari.

Co ja robię źle?

EDYCJA: Żeby było jasne, szukam wersji skróconej, aby zmniejszyć mój CSS. Jest wystarczająco napompowany wszystkimi prefiksami dostawcy. Rozszerzono również przykładowy kod.

Składnia:

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

Pamiętaj, że czas trwania musi być wcześniejszy niż opóźnienie, jeśli jest ono określone.

Poszczególne przejścia połączone w deklaracje skrócone:

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

Lub po prostu przenieś je wszystkie:

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

Oto prosty przykład . Oto kolejna z właściwością delay .

Edycja: poprzednio wymienione tutaj były kompatybilności i znane problemy dotyczące transition. Usunięto dla czytelności.

Podsumowując: po prostu go użyj. Charakter tej właściwości jest niezniszczalny dla wszystkich aplikacji, a kompatybilność jest obecnie znacznie wyższa niż 94% na całym świecie.

Jeśli nadal chcesz być pewien, zajrzyj na http://caniuse.com/css-transitions

Jeśli masz kilka określonych właściwości, które chcesz przenieść w ten sam sposób (ponieważ masz również pewne właściwości, których konkretnie nie chcesz, powiedzmy opacity), inną opcją jest zrobienie czegoś takiego (przedrostki pominięto dla zwięzłości):

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

Druga deklaracja zastępuje allpowyższą deklarację skróconą i sprawia, że ​​(czasami) kod jest bardziej zwięzły.

/* 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>

Próbny

Pracuję z tym:

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

Dzięki opóźnieniu .5s po przejściu przez właściwość krycia element będzie całkowicie przezroczysty (a przez to niewidoczny) przez cały czas jego zmiany wysokości. Jedyną rzeczą, którą zobaczysz, jest zmiana krycia. Otrzymasz taki sam efekt, jak pozostawienie właściwości height poza przejściem:

„przejście: krycie .5s .5s;”

Czy tego właśnie chcesz? Jeśli nie, a chcesz zobaczyć zmianę wysokości, nie możesz mieć krycia zero przez cały czas jej przejścia.

Pomogło mi to zrozumieć / usprawnić, tylko to, czego potrzebowałem do animacji:

// 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
  }
}

~ Dotyczy to wszystkich właściwości przejścia (czas trwania, funkcja synchronizacji czasu itp.) W klasie „.base”

Myślę, że to działa z tym:

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