Как иметь несколько переходов 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);
}

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

7 253
css css3 animation css-transitions

7 ответов:

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

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

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

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

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

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

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

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

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

-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

28

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

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

больше об этом здесь: CSS переход стенография с несколькими свойствами?

Я бы избегал использования свойства all (transition-property перезаписывает "все"), так как вы можете в конечном итоге получить нежелательное поведение и неожиданные хиты производительности.

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

вот меньше 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;
}
1

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

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/

1