Animation effect of waves made by CSS3

1. Effect display

First show the effect of the production, here is a picture instead.

2. Original code

It is mainly realized through the animation effect of css3 and the positioning and layout of html.

The implementation code is as follows:

css part, style layout and animation design:

.container{
				overflow: hidden;
				height: 300px;
				background: #28286f;
				position: relative;
			}
			.wave{
				position: absolute;
			    left: 0;
			    bottom: 0px;
			    width: 200%;
			    height: 150px;
			    background-repeat: repeat-x;
			    background-position: left bottom;
			    transform-origin: center bottom;
			    background-size: 50% 140px;
			}
			.wave1{z-index: 5;opacity: 1;animation: swave 20s linear infinite;background-image:url(img/曲线.png);}
			.wave2{z-index:4;opacity: .3;animation: swave 30s linear infinite;background-image:url(img/曲线.png);}
			.wave3{z-index:3;opacity: .5;animation: swave 45s linear infinite;background-image:url(img/曲线.png);}
			@keyframes swave{
			  0%{transform:translateX(0)  scaleY(1)}
			  50%{transform:translateX(-25%) scaleY(.55)}
			  100%{transform:translateX(-50%) scaleY(1)}
			  }

html interface part:

<div class="container">
			<div class="wave wave1"></div>
			<div class="wave wave2"></div>
			<div class="wave wave3"></div>
		</div>

Original Image: