Некоторые проблемы с адаптивной анимацией PNG - PullRequest
Новая
       19

Некоторые проблемы с адаптивной анимацией PNG

0 голосов
/ 28 июня 2019

Я пытаюсь исправить высоту тела, область просмотра в html, ширину и высоту изображения / контейнера анимации png, но никак не реагирует.

IЯ уже проверял другой вопрос о подобных вещах, но проблема все еще здесь.

(я не могу понять, что здесь не так, я стараюсь все, что я читал об этом, я много читаю, смеется) 

body {
  background-color: red;
  background-size: cover;
  height: 100vh;
  padding:0;
  margin:0;
  text-align: center;
  align-content: center;
}

.container1{

  background-image: url("https://i.ibb.co/WGn1Tcs/base1low.png") ;}

div.container1 {
    height: 506px;
    width: 900px;
    margin:0 auto;
    align-items: center;
  margin-top: 50px;
  overflow: hidden; }


.wave-onee {
  pointer-events: none;
  width: 900px;
  height: 506px;
  background: url("https://i.ibb.co/9GNXPyy/SXBASSO.png");
  no-repeat
  cssFloat: left;
  position: relative;
  margin-top: -37px;
  z-index: 7;
}

.wave-twoo {
  pointer-events: none;
  width: 900px;
  height: 506px;
  margin-top: -15px;
  background: url("https://i.ibb.co/j5p3Wdm/CERCHIO.png");
  no-repeat
  cssFloat: left;
  position: relative;
  z-index: 7;
}

.floating{
    animation-name: floating;
    -webkit-animation-name: floating;

    animation-duration: 10s;
    -webkit-animation-duration: 10s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
    0% {
        transform: translateX(0%);
    }
    20% {
         transform: translateX(10%);
    }
  	80% {
    		transform:translateX(5%)
    }
    100% {
        transform: translateX(10%);
    }
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateX(0%);
    }
    50% {
         transform: translateX(100%);
    }
  	80% {
      	transform: translateX(150%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
       <script type="text/javascript" src="index\js\jquery.js"></script>
<div class="container1">

          <div id='product-component-3e5dfd378ef'>
          </div>


           <ul class="wave-onee floating">
           </ul>

           <ul class="wave-twoo floating">

           </ul>



        </div>
...