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

304

12 февраля 2017, 11:57

Ассоциация SOEN

Я хочу сделать анимацию волны, которая превращается в прямую линию.
То, что есть сейчас, это анимация волны, идущей слева направо, см. ниже код. Также это может быть сделано только с помощью 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 version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="960px" height="200px" viewBox="91.43 -87.5 960 200" overflow="visible" enable-background="new 91.43 -87.5 960 200" xml:space="preserve"> 
		<defs> </defs> 
		<path id="wave1" fill="none" stroke="#2E2925" stroke-miterlimit="10" d="M0,24.5c28.57,0,28.57-24,57.141-24c28.57,0,28.57,24,57.141,24 
	c28.572,0,28.572-24,57.142-24c28.57,0,28.57,24,57.141,24c28.572,0,28.572-24,57.143-24c28.569,0,28.569,24,57.138,24 
	c28.57,0,28.57-24,57.14-24c28.57,0,28.57,24,57.139,24s28.569-24,57.14-24c28.57,0,28.57,24,57.14,24c28.572,0,28.572-24,57.145-24 
	s28.572,24,57.145,24c28.571,0,28.571-24,57.143-24c28.572,0,28.572,24,57.145,24c28.573,0,28.573-24,57.146-24 
	c28.571,0,28.571,24,57.143,24c28.573,0,28.573-24,57.146-24c28.573,0,28.573,24,57.146,24c28.574,0,28.574-24,57.149-24 
	s28.575,24,57.149,24" /> </svg> 
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="960px" height="200px" viewBox="120 -87.5 960 200" overflow="visible" enable-background="new 120 -87.5 960 200" xml:space="preserve"> 
		<defs> </defs> 
		<path id="wave2" fill="none" stroke="#E74267" stroke-miterlimit="10" d="M0,0.5c14.633,0,14.633,24,29.266,24c14.632,0,14.632-24,29.265-24 
	c14.636,0,14.636,24,29.27,24c14.633,0,14.633-24,29.265-24c14.635,0,14.635,24,29.268,24c14.635,0,14.635-24,29.269-24 
	c14.633,0,14.633,24,29.267,24c14.633,0,14.633-24,29.267-24s14.634,24,29.266,24c14.635,0,14.635-24,29.269-24s14.634,24,29.268,24 
	s14.634-24,29.269-24c14.634,0,14.634,24,29.269,24c14.633,0,14.633-24,29.268-24c14.631,0,14.631,24,29.262,24 
	c14.633,0,14.633-24,29.266-24c14.632,0,14.632,24,29.266,24c14.631,0,14.631-24,29.263-24c14.634,0,14.634,24,29.266,24 
	c14.636,0,14.636-24,29.269-24c14.635,0,14.635,24,29.268,24s14.633-24,29.266-24s14.633,24,29.266,24s14.633-24,29.268-24 
	c14.633,0,14.633,24,29.266,24c14.637,0,14.637-24,29.271-24s14.635,24,29.268,24c14.635,0,14.635-24,29.27-24s14.635,24,29.27,24 
	s14.635-24,29.27-24s14.635,24,29.27,24s14.635-24,29.27-24c14.633,0,14.633,24,29.266,24c14.635,0,14.635-24,29.27-24 
	s14.635,24,29.27,24s14.635-24,29.271-24s14.637,24,29.271,24c14.639,0,14.639-24,29.275-24s14.637,24,29.273,24 
	c14.639,0,14.639-24,29.277-24s14.639,24,29.277,24" /> </svg> 
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="960px" height="200px" viewBox="100.641 -75.5 960 200" overflow="visible" enable-background="new 100.641 -75.5 960 200" xml:space="preserve"> 
		<defs> </defs> 
		<path id="wave3" fill="none" stroke="#000000" stroke-miterlimit="10" d="M1161.282,0.5c-19.359,0-19.359,48-38.719,48 
	c-19.355,0-19.355-48-38.713-48c-19.355,0-19.355,48-38.715,48c-19.355,0-19.355-48-38.711-48s-19.355,48-38.711,48 
	c-19.354,0-19.354-48-38.707-48c-19.355,0-19.355,48-38.713,48c-19.355,0-19.355-48-38.711-48s-19.355,48-38.713,48 
	c-19.354,0-19.354-48-38.709-48s-19.355,48-38.709,48s-19.354-48-38.709-48c-19.354,0-19.354,48-38.709,48 
	c-19.354,0-19.354-48-38.709-48c-19.354,0-19.354,48-38.71,48c-19.353,0-19.353-48-38.707-48c-19.353,0-19.353,48-38.706,48 
	s-19.353-48-38.705-48s-19.352,48-38.704,48c-19.353,0-19.353-48-38.705-48c-19.355,0-19.355,48-38.709,48 
	c-19.355,0-19.355-48-38.708-48c-19.356,0-19.356,48-38.71,48s-19.354-48-38.708-48s-19.354,48-38.708,48 
	c-19.355,0-19.355-48-38.708-48c-19.355,0-19.355,48-38.709,48s-19.354-48-38.709-48s-19.354,48-38.709,48S19.354,0.5,0,0.5" /> 
	</svg>

Answer 1

Если вы хотите, постепенно сгладить линии у волн, то можно просто анимировать их уменьшение от 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 version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="960px" height="200px" viewBox="91.43 -87.5 960 200" overflow="visible" enable-background="new 91.43 -87.5 960 200" xml:space="preserve"> 
		<defs> </defs> 
		<path id="wave1" fill="none" stroke="#2E2925" stroke-miterlimit="10" d="M0,24.5c28.57,0,28.57-24,57.141-24c28.57,0,28.57,24,57.141,24 
	c28.572,0,28.572-24,57.142-24c28.57,0,28.57,24,57.141,24c28.572,0,28.572-24,57.143-24c28.569,0,28.569,24,57.138,24 
	c28.57,0,28.57-24,57.14-24c28.57,0,28.57,24,57.139,24s28.569-24,57.14-24c28.57,0,28.57,24,57.14,24c28.572,0,28.572-24,57.145-24 
	s28.572,24,57.145,24c28.571,0,28.571-24,57.143-24c28.572,0,28.572,24,57.145,24c28.573,0,28.573-24,57.146-24 
	c28.571,0,28.571,24,57.143,24c28.573,0,28.573-24,57.146-24c28.573,0,28.573,24,57.146,24c28.574,0,28.574-24,57.149-24 
	s28.575,24,57.149,24" /> </svg>