SVG плюс CSS анимация

#css #анимация #svg #css_animation

Я хочу сделать анимацию волны, которая превращается в прямую линию.
То, что  есть сейчас, это анимация волны, идущей слева направо, см. ниже код. Также
это может быть сделано только с помощью CSS?  



body {
  width: 960px;
  height: 100%;
  background-color: #d3d3d3;
}


/*#wave1 {
  transform: translate(-260px, 200px);
}*/

#wave1 {
  animation: popup 5s ease infinite;
}

@keyframes popup {
  0% {
    transform: translate( -500px, 0);
  }
  100% {
    transform: translate(400px, 0);
  }
}

#wave2 {
  animation: popup 5s ease infinite;
}

@keyframes popup {
  0% {
    transform: translate( -500px, 0);
  }
  100% {
    transform: translate(400px, 0);
  }
}

#wave3 {
  animation: popup 5s ease infinite;
}

@keyframes popup {
  0% {
    transform: translate( -500px, 0);
  }
  100% {
    transform: translate(400px, 0);
  }
}







Перевод вопроса: svg plus css animation@pcuvi
    

Ответы

Ответ 1

Если вы хотите, постепенно сгладить линии у волн, то можно просто анимировать их
уменьшение  от 1 до 0.  



body {
  width: 960px;
  height: 100%;
  background-color: #d3d3d3;
}


#wave1 {
  animation: popup 5s ease infinite;
}

@keyframes popup {
  0% {
    transform: translate( -500px, 0) scale(1, 1);
  }
  100% {
    transform: translate(400px, 0) scale(1, 0);
  }
}





Источник