ANTON072
4/3/2016 - 4:31 AM

svgでcssアニメーション

svgでcssアニメーション

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		svg {
			display: block;
		}
		.circle-anim {
			fill: #f00;
			transition: .3s;
		}
		.circle-anim:hover {
			fill: #000;
			transform: translate(0, 30px);
		}
	</style>
</head>
<body>

<svg viewBox="0 0 200 200" width="200px" height="200px">

	<circle cx="100" cy="100" r="30" class="circle-anim"></circle>

</svg>

</body>
</html>