Как настроить анимацию CSS, чтобы предотвратить перекрытие непрозрачности? - PullRequest
Новая
       3

Как настроить анимацию CSS, чтобы предотвратить перекрытие непрозрачности?

0 голосов
/ 07 мая 2020

Я пытаюсь создать анимацию, используя CSS, которая представляет движение определенного <div>.

Чтобы представить это движение, я хотел бы, чтобы мой <div> оставил исчезающий след за. анимация с большей непрозрачностью, чем должна быть.

Мой точный код, который воспроизводит этот нежелательный эффект, - это скрипка ниже:

JSFiddle

Кто-нибудь может, пожалуйста объясните мне, как предотвратить это от моей анимации?

1 Ответ

1 голос
/ 07 мая 2020

Это то, что вы хотите?

Я обернул все ваши div в один контейнер и анимировал только этот контейнер.

Также дал свойство left каждому div. 

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 16.5px;
  height:80px;
  background-repeat: no-repeat;
  font-weight: bold;
  position: absolute;
  animation-timing-function:linear;
}

.container {
  width: 0px;
  animation: newmove 2.4s infinite;
  position: relative;
  overflow: hidden;
}
#div1 {background-color: red; left: 148.5px}
#div2 {background-color: red; opacity: 0.9; left: 132px}
#div3 {background-color: red; opacity: 0.8; left: 115.5px}
#div4 {background-color: red; opacity: 0.7; left: 99px}
#div5 {background-color: red; opacity: 0.6; left: 82.5px}
#div6 {background-color: red; opacity: 0.5; left: 66px}
#div7 {background-color: red; opacity: 0.4; left: 49.5px}
#div8 {background-color: red; opacity: 0.3; left: 33px;}
#div9 {background-color: red; opacity: 0.2; left: 16.5px}
#div10 {background-color: red; opacity: 0.1; left: 0px}

@keyframes newmove {
  0% {
    width: 0px;
  }
  100% {
    width: 165px;
  }
}
</style>
</head>
<body style="background-color: yellow">
  <div class="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
    <div id="div6"></div>
    <div id="div7"></div>
    <div id="div8"></div>
    <div id="div9"></div>
    <div id="div10"></div>
  </div>
</body>
</html>
...