Не удается перейти на работу css

0

У меня есть эта кнопка, которую я хочу оживить. Для достижения этой анимации я хочу использовать color и box-shadow.

Проблема в том, что переход будет работать только для одного - color или box-shadow.

Пожалуйста, посмотрите, вот JSFiddle.

    -webkit-transition-property: box-shadow; -webkit-transition-duration: 0.1s; -webkit-transition-timing-function: ease-in-out;
    -moz-transition-property: box-shadow; -moz-transition-duration: 0.1s; -moz-transition-timing-function: ease-in-out;
    -o-transition-property: box-shadow; -o-transition-duration: 0.1s; -o-transition-timing-function: ease-in-out;
    transition-property: box-shadow; transition-duration: 0.1s; transition-timing-function: ease-in-out;

    -webkit-transition-property: color; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease-in-out;
    -moz-transition-property: color; -moz-transition-duration: 0.2s; -moz-transition-timing-function: ease-in-out;
    -o-transition-property: color; -o-transition-duration: 0.2s; -o-transition-timing-function: ease-in-out;
    transition-property: color; transition-duration: 0.2s; transition-timing-function: ease-in-out;

Причина, по которой я нацелен на каждое свойство отдельно, заключается в том, что я хочу избежать использования all.

благодаря

  • 2
    Включите соответствующий код в свой пост тоже.
  • 0
    @hjpotter92 hjpotter92 Код находится в JSFiddle. На расстоянии одного клика.
Показать ещё 3 комментария
Теги:
css-transitions

1 ответ

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

Вам нужно установить свойства сразу, как это:

-webkit-transition:
    box-shadow 0.1s ease-in-out,
    color 0.2s ease-in-out;
-moz-transition:
    box-shadow 0.1s ease-in-out,
    color 0.2s ease-in-out;
-o-transition:
    box-shadow 0.1s ease-in-out,
    color: 0.2s ease-in-out;
transition:
    box-shadow 0.1s ease-in-out,
    color: 0.2s ease-in-out;

Обновлен jsFiddle

Ещё вопросы

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