Сокращение перехода CSS с несколькими свойствами?

Синтаксис:

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

Обратите внимание, что длительность должна предшествовать задержке, если она указана.

Отдельные переходы объединены в сокращенные объявления:

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

Или просто переместите их все:

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

Вот простой пример. Вот еще один со свойством задержки.

Изменить: здесь ранее были указаны совместимость и известные проблемы, касающиеся transition. Удалено для удобства чтения.

Итог: просто используйте это. Природа этого свойства не нарушает работу всех приложений, и в настоящее время совместимость во всем мире значительно превышает 94%.

Если вы все еще хотите быть уверены, обратитесь к http://caniuse.com/css-transitions

Если у вас есть несколько определенных свойств, которые вы хотите преобразовать таким же образом (потому что у вас также есть некоторые свойства, которые вы специально не хотите преобразовывать, скажем opacity), другой вариант - сделать что-то вроде этого (префиксы для краткости опущены):

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

Второе объявление отменяет all в сокращенном объявлении над ним и делает (иногда) более сжатый код.

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

Демо

Я заставил это работать с этим:

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

Имея задержку 0,5 с при переходе свойства непрозрачности, элемент будет полностью прозрачным (и, следовательно, невидимым) все время, пока изменяется его высота. Так что единственное, что вы действительно увидите, - это изменение непрозрачности. Таким образом, вы получите тот же эффект, что и оставив свойство высоты вне перехода:

"переход: непрозрачность .5s .5s;"

Вы этого хотите? Если нет, и вы хотите видеть переход высоты, у вас не может быть нулевой непрозрачности в течение всего времени перехода.

Это помогло мне понять / оптимизировать только то, что мне нужно было анимировать:

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

~ Это относится ко всем свойствам перехода (длительность, функция времени перехода и т. Д.) В классе .base.

Я думаю, что это должно сработать:

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