CSS3 полная анимация фона при изменении высоты тела - PullRequest
Новая
       9

CSS3 полная анимация фона при изменении высоты тела

1 голос
/ 08 мая 2019

Я пытаюсь получить полноразмерную анимацию css3, которая оживляет фон. Это работает нормально, пока высота тела остается на высоте окна просмотра. Если содержимое меняется, и пользователь должен прокрутить, анимация прерывается внизу:

image

Я уже пытался изменить стили CSS для html и body в соответствии с некоторыми уроками и в итоге получил следующее:

Я также пытался установить body на 100vh, но я думаю, что проблема в том, что сама анимация не масштабируется должным образом.

CSS для анимации это: 

html {
  height: 100%;
}
body {
  min-height: 100%;
}

.rememberly-animation {
  background: linear-gradient(41deg, #53b5fe, #7abfb4, #5e9793);
  -webkit-animation: rememberly-background 30s ease infinite;
  -moz-animation: rememberly-background 30s ease infinite;
  animation: rememberly-background 30s ease infinite;
}

@-webkit-keyframes rememberly-background {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes rememberly-background {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes rememberly-background {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
<html>
  <body class="rememberly-animation">
  </body>
</html>

В тег body добавлен класс .rememberly-animation.

Мне как-то нужна анимация для масштабирования по всей высоте, если видовой экран (содержимое) меняется и пользователю необходимо прокрутить вниз.

Есть намеки на это?

1 Ответ

1 голос
/ 08 мая 2019

Это связано с фоновым распространением , и ваш фон перемещается в html, который вы установили как height:100%.

Вот для иллюстрации проблемы: 

html {
  height:50px;
}
body {
  height:100px;
  border:2px solid;
  margin:0;
}

body {
  background: linear-gradient(41deg, #53b5fe, #7abfb4, red);
  animation: rememberly-background 30s ease infinite;
}



@keyframes rememberly-background {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

Обратите внимание, что фон странным образом повторяет каждый 50px во всем документе, а не только в теле.

Чтобы избежать этого, добавьте фон кHTML-элемент: 

html {
  height:50px;
  background:#fff;
}
body {
  height:100px;
  border:2px solid;
  margin:0;
}

body {
  background: linear-gradient(41deg, #53b5fe, #7abfb4, red);
  animation: rememberly-background 30s ease infinite;
}



@keyframes rememberly-background {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

Ваш окончательный код может быть: 

html {
  background:#fff;
}
body {
  min-height:100vh;
  margin:0;
}

body {
  background: linear-gradient(41deg, #53b5fe, #7abfb4, #5e9793);
  animation: rememberly-background 30s ease infinite;
}



@keyframes rememberly-background {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}
<div style="height:150vh;">to add scroll</div>

Из этого у вас возникла еще одна проблема, объясненная здесь: Использование процентных значений с положением фона на линейном градиенте

Вы должны указать background-size, чтобы анимация работала 

html {
  background:#fff;
}
body {
  min-height:100vh;
  margin:0;
}

body {
  background: linear-gradient(41deg, #53b5fe, #7abfb4, red);
  background-size:200% 200%;
  animation: rememberly-background 3s ease infinite;
}



@keyframes rememberly-background {
    0%,100% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
}
...