У меня есть эта кнопка, которую я хочу оживить. Для достижения этой анимации я хочу использовать 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
.
благодаря
Вам нужно установить свойства сразу, как это:
-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;