Почему не работает transition для background-image?

Question

[Евгений Иванов]

Свойство transition прекрасно работает для background и не работает для background-image.
Почему не работает transition для background-image?
https://jsfiddle.net/c9L0xmq7/2/

<a href="#" class="ui_link_button_2">Кнопка 2</a>

.ui_link_button_2{
border: 1px solid #1A9EDB;
background-image: -webkit-linear-gradient(top, #0F99D9, #0177AF);
background-image: -moz-linear-gradient(top, #0F99D9, #0177AF);
background-image: -ms-linear-gradient(top, #0F99D9, #0177AF);
background-image: -o-linear-gradient(top, #0F99D9, #0177AF);
background-image: linear-gradient(to bottom, #0F99D9, #0177AF);
color: #ffffff;
font-family: open_sans_regular;
font-size: 12px;
padding: 12px 20px;
text-align: center;
text-decoration: none;
transition-property: background-image;
transition-duration: 3000ms;
transition-timing-function: ease;
transition-delay: 0s; 
}
.ui_link_button_2:hover {
border: 1px solid #13A0E2;
background-image: -webkit-linear-gradient(top, #13A0E2, #0298DE);
background-image: -moz-linear-gradient(top, #13A0E2, #0298DE);
background-image: -ms-linear-gradient(top, #13A0E2, #0298DE);
background-image: -o-linear-gradient(top, #13A0E2, #0298DE);
background-image: linear-gradient(to bottom, #13A0E2, #0298DE);
}

Answer 1

[Dima Polos]

Не работает и работает не будет! Надо понимать, что такое переход из состояния в состояние, а что такое дискретность. Дело в том, что есть состояния, которые плавно перетекают, а есть только такое или такое. Например, ребенок растет плавно, вот ребенку один год, вот прошло два месяца и уже год и 2 месяца, как ни странно, а вот ему уже 43, а есть (сейчас не будем про хирургию) дискретное состояние ребенка или человека, это девочка или мальчик, человек либо родился такого пола, либо другого, нет переходного состояния, как в случае с возрастом. Зачем это понимать и знать? Потому что transition отработает только для свойств, которые переходные, но не дискретные. Например, есть ширина 0 пкс, добавим 1 пкс и ширина уже 1пкс, добавим еще 20 - 20пкс, такое свойство можно анимировать. Есть прозрачность 0, а есть 0.1, а есть 0.2, 0.5, 1 - тоже можно. Но, есть display: block, а есть display: none, это дискретные состояния, либо есть, либо нет, анимации не будет, зато можно блок показать/скрыть с помощью анимации на его ширину, высоту, прозрачность... Цвет, как ни странно это тоже величина, которая имеет переходные состояния, например в препроцессорах можно написать #ccc + #eee и получить новый цвет, так как цвета задаются, по сути, просто числом, и увеличивая/уменьшая число получаем анимацию. А какой переход между двумя картинками? Никакого, только такая картинка или такая, поэтому, чтобы сделать плавную анимацию надо пробовать, разве что, прозрачность блока с фоновым изображением.

Comments

[Евгений Иванов]

То что "Не работает и работает не будет" - я понял.
Немного странно. Я думал - градиент это переход между двумя цветами.
Т.е. просто два цвета. И будет как с одним цветом, так и с двумя. Но видимо нет.
Похоже что background-image приводит всё к картинке и что там написано - есть картинка.
Не ясно пока что делать и как изменить код. Градиенты близкие, можно даже сказать что второй градиент - "осветление" первого.

[Dima Polos]

Евгений Иванов, вот ниже вариант подкинули, видимо да, к картинке, надо в спеке почитать. Ниже есть вариант позицию фона менять.

[madhed]

одно из самых понятных объяснений!

[Dima Polos]

madhed, спасибо :)

[Brendan Castaneda]

Лол ))

человек либо родился такого пола, либо другого, нет переходного состояния

Ещё как есть) был мальчик стал девочкой с палкой, так-что бывает ещё как )))

[Dima Polos]

Brendan Castaneda, ну, в изначальной реализации такого кейса не предусмотрено)))

[Brendan Castaneda]

Dima Polos, Не баг а фича! )))

[Dima Polos]

Brendan Castaneda, )))

Answer 2

[Максим]

не по теме : https://codepen.io/topicstarter/pen/QapoNE?editors=1100 о вот так можно