CSS3 скользящая градиентная анимация - как это работает - PullRequest
Новая
       8

CSS3 скользящая градиентная анимация - как это работает

0 голосов
/ 18 сентября 2018

Следующий код создает анимацию скользящего градиента без какой-либо строки кода JavaScript: 

html {
  height: 100%
}

body {
  height: 100%;
  margin: 0
}

@keyframes loading {
  from {
    background-position: -5000% 0, 0 0
  }
  to {
    background-position: 5000% 0, 0 0
  }
}

.skeleton {
  height: 100%;
  animation-name: loading;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  background-color: #fff;
  background-repeat: no-repeat;
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .8) 50%, hsla(0, 0%, 100%, 0)), linear-gradient(#e5e5e5 100%, transparent 0);
  background-size: 99% 100%;
}
<div class="skeleton"></div>

Я экспериментировал с некоторыми свойствами и до сих пор не понимаю, как это работает.Особенно, когда background-size: 99% 100%; изменяется на background-size: 100% 100%; анимация, скользящая в противоположном направлении!

Не могли бы вы объяснить это?

1 Ответ

0 голосов
/ 19 сентября 2018

Я не знаю, какой у вас браузер и какая у него версия.Но на моем компьютере, если background-size: 100% 100%, анимация будет остановлена.(На самом деле background-position будет игнорироваться)

Идея этого трюка заключается в перемещении background-image (линейный градиент) на background-position.(Проверьте комментарий в приведенном ниже коде для получения подробной информации)

По поводу вашего второго вопроса, вы должны ссылаться на этот ответ CSS background-position игнорируется при использовании background-size .Краткий обзор, вы не можете использовать проценты для background-position, если background-size достигает 100%.Это происходит потому, что фоновое изображение не имеет места для перемещения.

Если вы настаиваете на использовании background-size со 100%.Боюсь, вы должны использовать абсолютные значения.

Кстати, я обновил код.Теперь это выглядит лучше. 

html {
  height: 100%
}

body {
  height: 100%;
  margin: 0
}

@keyframes loading {/* original code */
  from {/* This is the position of image of the first frame */
    background-position: -5000% 0, 0 0
  }
  to {/* This is the pos of img of the last frame */
    background-position: 5000% 0, 0 0
  }
}

@keyframes betterLoading {
  0% {/* This is the position of image of the first frame */
    background-position: -5000% 0, 0 0
  }
  50% {
    /* This is the pos of img of a frame in the middle happening animation */
    /* If duration is 1s then the pos below will be at 0.5s */
    background-position: 5000% 0, 0 0
  }
  100% {/* This is the pos of img of the last frame */
    background-position: -5000% 0, 0 0
  }
}

.skeleton {
  height: 100%;
  animation-name: betterLoading;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  background-color: #fff;
  background-repeat: no-repeat;
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .8) 50%, hsla(0, 0%, 100%, 0)), linear-gradient(green 100%, transparent 0);
  background-size: 99% 100%, cover;
}
<div class="skeleton"></div>
...