Как иметь несколько переходов CSS в элементе?

Это довольно простой вопрос, но я не могу найти очень хорошую документацию по свойствам перехода CSS. Вот фрагмент 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);
}

Как вы можете видеть, свойства перехода переписывают друг друга. Как бы то ни было, текстовая тень будет анимировать, но не цвет. Как мне заставить их одновременно одновременно анимировать? Спасибо за любые ответы.

Ответ 1

Свойства перехода разделены запятыми во всех браузерах, которые поддерживают переходы:

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

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

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

Это начинает становиться повторяющимся, поэтому, если вы собираетесь использовать одни и те же функции времени и времени для нескольких свойств, лучше всего пойти дальше и использовать различные свойства transition-* вместо сокращения:

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

Ответ 2

Вы также можете просто значительно:

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

Ответ 3

Что-то вроде следующего позволит несколько переходов одновременно:

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

Пример: http://jsbin.com/omogaf/2

Ответ 4

Если вы сделаете все свойства анимированными одинаково, вы можете установить каждое из них отдельно, что позволит вам не повторять код.

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

Здесь есть еще кое-что: CSS-сокращение с несколькими свойствами?

Я бы не использовал свойство all (свойство transition перезаписывает 'all'), так как это может привести к нежелательному поведению и неожиданным сбоям в производительности.

Ответ 5

Не забывайте, что transition: all очень глючит для сафари /ipad: http://joelglovier.com/writing/solution-for-css-transitions-crashing-safari/

Ответ 6

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

Ответ 7

Здесь LESS mixin для перехода сразу двух свойств:

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

Ответ 8

Можно установить множество переходов с разными значениями длительности, задержки и функции синхронизации. Для того, чтобы разделить различные переходы используют ,

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

Ссылка: https://kolosek.com/css-transition/

Ответ 9

Также возможно избежать указания свойств в целом.

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