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

200

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

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

  • 0
    Не забывайте, что transition: all очень глючит для сафари / iPad: joelglovier.com/writing/…
Теги:
animation
css-transitions

7 ответов

386
Лучший ответ

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

.nav a {
  -webkit-transition: color .2s, text-shadow .2s;
  /* And so on... */
}

Ease является значением по умолчанию, поэтому вам не нужно указывать его. Если вы действительно хотите линейный, вам нужно будет указать его, т.е. -webkit-transition: color .2s linear, text-shadow .2s linear;

Поделиться
  • 3
    почему эта запятая разделена, а преобразование нет! давай по стандартам ....
  • 6
    Я полагаю, потому что преобразование - это цепочка, в которой порядок важен, поэтому синтаксис приятен, если вы привыкли к функциональному объединению, тогда как переход требует неупорядоченного списка полностью независимых элементов, поэтому запятые являются подходящими
Показать ещё 1 комментарий
33

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

.nav a {
    -webkit-transition: all .2s;
}
Поделиться
  • 41
    Вы можете удалить «все», так как это значение по умолчанию, если не указано иное.
  • 13
    +1 за отличный балл, но я думаю, что это полезно, чтобы сохранить его, особенно для последовательности и понимания между командами.
Показать ещё 9 комментариев
27

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

-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

Поделиться
  • 0
    это работает для всех браузеров?
20

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

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

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

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

Поделиться
  • 0
    Хороший совет, гораздо более читаемый код ИМО
3

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

Поделиться
3 
.nav a {
    transition: color .2s, text-shadow .2s;
}
Поделиться
1

Здесь 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;
}
Поделиться
  • 2
    Хм, Стилус кажется лучше :) pastebin.com/FphhtNvH
  • 0
    Авторефиксатор еще приятнее!
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню