Анимировать фон на основе элемента ширины - PullRequest
Новая
       56

Анимировать фон на основе элемента ширины

0 голосов
/ 23 октября 2018

У меня есть 4 элемента с градиентным фоном, которые я хочу анимировать.

Я создал пример: 

.element div {
  display: inline-block;
  height: 16px;
  animation: slide 2s infinite;
  animation-timing-function: linear;
  background: linear-gradient(90deg, rgba(242,243,245,1) 0%, rgba(242,243,245,1) 40%, rgba(223,223,223,1) 50%, rgba(242,243,245,1) 60%, rgba(242,243,245,1) 100%);
}

.element div:nth-child(1) {width: 75%;}
.element div:nth-child(2) {width: 65%;}
.element div:nth-child(3) {width: 55%;}
.element div:nth-child(4) {width: 45%;}

@keyframes slide {
  from { background-position: 0 0; }
  to { background-position: 1300px 0; }
}

html,
body {
  height: 100%;
}
<div class="element">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Это анимация: 

@keyframes slide {
  from { background-position: 0 0; }
  to { background-position: 1300px 0; }
}

Как вы можете видеть, она установлена ​​на 1300px, поэтому анимации для других элементовне правильно

1 Ответ

0 голосов
/ 23 октября 2018

Вы можете настроить свой код, как показано ниже: 

.element div {
  display: inline-block;
  height: 16px;
  animation: slide 2s infinite;
  animation-timing-function: linear;
  background: 
    linear-gradient(90deg, rgba(242,243,245,1) 0%, rgba(242,243,245,1) 40%, rgba(223,223,223,1) 50%, rgba(242,243,245,1) 60%, rgba(242,243,245,1) 100%);
  background-size:200% 100%; /*added this*/
}

.element div:nth-child(1) {width: 75%;}
.element div:nth-child(2) {width: 65%;}
.element div:nth-child(3) {width: 55%;}
.element div:nth-child(4) {width: 45%;}

@keyframes slide {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
<div class="element">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Вы можете проверить этот ответ для более подробной информации: https://stackoverflow.com/a/51734530/8620333

...