Я хочу сделать анимацию волны, которая превращается в прямую линию.
То, что есть сейчас, это анимация волны, идущей слева направо, см. ниже код. Также это может быть сделано только с помощью 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
Комментариев нет:
Отправить комментарий