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

Свойство 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);
}
  • Вопрос задан
  • 3654 просмотра
Решения вопроса 1
dimovich85
@dimovich85 Куратор тега CSS
https://u-academy.net/
Не работает и работает не будет! Надо понимать, что такое переход из состояния в состояние, а что такое дискретность. Дело в том, что есть состояния, которые плавно перетекают, а есть только такое или такое. Например, ребенок растет плавно, вот ребенку один год, вот прошло два месяца и уже год и 2 месяца, как ни странно, а вот ему уже 43, а есть (сейчас не будем про хирургию) дискретное состояние ребенка или человека, это девочка или мальчик, человек либо родился такого пола, либо другого, нет переходного состояния, как в случае с возрастом. Зачем это понимать и знать? Потому что transition отработает только для свойств, которые переходные, но не дискретные. Например, есть ширина 0 пкс, добавим 1 пкс и ширина уже 1пкс, добавим еще 20 - 20пкс, такое свойство можно анимировать. Есть прозрачность 0, а есть 0.1, а есть 0.2, 0.5, 1 - тоже можно. Но, есть display: block, а есть display: none, это дискретные состояния, либо есть, либо нет, анимации не будет, зато можно блок показать/скрыть с помощью анимации на его ширину, высоту, прозрачность... Цвет, как ни странно это тоже величина, которая имеет переходные состояния, например в препроцессорах можно написать #ccc + #eee и получить новый цвет, так как цвета задаются, по сути, просто числом, и увеличивая/уменьшая число получаем анимацию. А какой переход между двумя картинками? Никакого, только такая картинка или такая, поэтому, чтобы сделать плавную анимацию надо пробовать, разве что, прозрачность блока с фоновым изображением.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
LenovoId
@LenovoId
I want, women not to get sick
не по теме : https://codepen.io/topicstarter/pen/QapoNE?editors=1100 о вот так можно
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы