Страницы

Поиск по вопросам

воскресенье, 26 мая 2019 г.

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

Я хочу сделать анимацию волны, которая превращается в прямую линию. То, что есть сейчас, это анимация волны, идущей слева направо, см. ниже код. Также это может быть сделано только с помощью 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 до 0.
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) scale(1, 1); } 100% { transform: translate(400px, 0) scale(1, 0); } }
Перевод ответа: svg plus css animation @Paul LeBeau

Комментариев нет:

Отправить комментарий