Как можно указать всю ветку css в jquery + keyframe?

У меня есть такой css код, который задает анимацию приближения на бэкграунде.

.main-screen {
background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, rgba(0, 0, 0, .33)), color-stop(50%, transparent)), url(../img/main-screen.jpg);
background: linear-gradient(180deg, rgba(0, 0, 0, .33) 100%, transparent 50%), url(../img/main-screen.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: top;
padding-bottom: 5rem;
animation-duration: 10s;
animation-name: bgsize;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}
под ним стоит кей фрейм
@keyframes bgsize {
to {background-size: 130% auto;}
}
Я хочу чтобы при смене слайда менялся и задний фон для этого я задал эту функцию по клику:

$('.main-screen').animate({background:"url('./img/main-screen.jpg') no-repeat top / cover"}, 1000)
Фон меняется и все нормально, но мне нужна еще одна такая же анимация приближения + градиент на бэкграунде, который и задан и в css коде. Как это все правильно написать чтобы в идеале выйти на плавное переключение backgrounda через animate? Плагин jquery color стоит, если он что то решает.
  • Вопрос задан
  • 36 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
20 марта 2019, в 01:07
1000 руб./за проект
20 марта 2019, в 00:27
2000 руб./за проект
19 марта 2019, в 23:14
6000 руб./за проект