Free CSS Animations

Select Animation Type

Export Code

CSS:

.standingWave-animation {
  
  width: 100%;
  height: 300px;
  overflow: hidden;

  
  position: relative;
  background-color: #5538F6;

}


@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}


.standingWave-animation::before,
.standingWave-animation::after {
  content: '';
  position: absolute;
  background: #FFFFFF;
  animation: wave 10s linear infinite;
}

HTML:

<div class="standingWave-animation"></div>