06-svg/animation.html

<!DOCTYPE html>

<html>

<head>
	<meta charset="utf-8" />
	<title>SVG Animate</title>
</head>

<body>

	<h1>SVG Animate</h1>


	<h2>Animate CSS</h2>
		
		<svg width="100" height="100">
			<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
			<animate attributeType="CSS" attributeName="opacity"
					 from="1" to="0" dur="5s" repeatCount="indefinite" />
		</svg>

		<h2>Animate motion</h2>

			
		<svg width="640" height="480">

			<path d="M20 20 L640 20" stroke="lightgrey" stroke-width="2" 
			fill="none" id="theMotionPath"/>
			
			<!-- Here is a red circle which will be moved along the motion path. -->
			<circle r="10" fill="red">

				<!-- Define the motion path animation -->
				<animateMotion dur="10s" repeatCount="indefinite">
					<mpath xlink:href="#theMotionPath"/>
				</animateMotion>
			</circle>
		</svg>

	</body>

	</html>
	