Почему не работает transition свойство в scss файле через webpack?

Question

[Sviaznoi]

Собстевенно хочу разобраться в ситуации возникшей с анимацией background'a с применением linear-gradient. В webpack пишу через scss и хотелось бы чтоб в блоке header менялась онимация градиента. По мурыжав тему самостоятельно (и без результатно ) через animation и transition полез в интернет, откуда взял данный код:

header {
    transition: all 1s;
    height: 180px;
    min-width: 750px;        
    margin: 5px auto 5px;
    border: solid 2px $orange;
    border-radius: 10px;
}
.head {
    background: linear-gradient(0deg,$orange 0%, $darkOrange 50%, $orange 100%);
    background-size: 150%;
}

.head:hover {
    background-position: 40%;
}

Но вместо онимации background'а при наведении мыши получил онимацию border'а при загрузки страницы, и не понял почему.
Разъесните ситуацию пожалуйста!

Answer 1

[leeroyjenkins176]

Угол 0deg означает, что градиент идет снизу вверх.
Указание одного значения для свойств background-size и background-position применяется для оси X, что в случае данного градиента визуально никак не сказывается. Вам нужно задавать изменения для оси Y.

background-size: auto 150%;
background-position: 0 40%;

И в transition рекомендуется анимировать только нужные свойства.

Comments

[Sviaznoi]

В scss transition выделяет свойство background выделяет красным, намикая, что данное свойство в нём запрещено. Да и если заменить проценты на пиксели, должно начать работать. По крайней мере без hover работает.

Answer 2

[Sviaznoi]

.screen {
  width: 250px ;
  height: 250px;
  border: 2px solid black;
  border-radius: 20px;
  transition: all 0.5s;
}

.gradient {
  background: linear-gradient(0deg, yellow 0%, red 50%, yellow 100%);
  background-size: 150%;
}

.gradient:hover {
  background-position-y: 40px;

Данный код работает в чистом css.

Comments

[Sviaznoi]

Дома на коомпе попробую.

[Sviaznoi]

В общем заработало. Код написал такой:

header {
    transition: background-position-y 1s;
    height: 180px;
    min-width: 750px;
    margin: 5px auto 5px;
    border: solid 2px $orange;
    border-radius: 10px;
}
.head {
    background: linear-gradient(0deg,$orange 0%, $darkOrange 50%, $orange 100%);
    background-size: 270px;
}

.head:hover {
    background-position-y: 135px;
}

background-position-y работает, почемуте, только с пикселями как в css так и в scss. Но работает! В отличие от css в scss будет анимация всего заголовка при загрузке страницы пока не пропишешь в transition конкретно background-position-y вместо all.