@Sviaznoi

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

Собстевенно хочу разобраться в ситуации возникшей с анимацией 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'а при загрузки страницы, и не понял почему.
Разъесните ситуацию пожалуйста!
  • Вопрос задан
  • 66 просмотров
Решения вопроса 1
@leeroyjenkins176
Угол 0deg означает, что градиент идет снизу вверх.
Указание одного значения для свойств background-size и background-position применяется для оси X, что в случае данного градиента визуально никак не сказывается. Вам нужно задавать изменения для оси Y.
background-size: auto 150%;
background-position: 0 40%;

И в transition рекомендуется анимировать только нужные свойства.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
21 мая 2024, в 01:44
5000 руб./за проект
21 мая 2024, в 00:34
1000 руб./за проект
20 мая 2024, в 23:58
1500 руб./за проект