PNG响应动画的一些问题

Question

我已经尝试固定车身高度，html上的视口以及png动画的图像/容器的宽度和高度，但是以任何方式都无法响应。

我已经检查过类似问题的不同问题，但问题仍然存在。

（我不明白这里出了什么问题，我尝试了所有我读到的，我读了很多，哈哈）

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>