html SVGでCSSアニメーション

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 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>

以上是关于html SVGでCSSアニメーション的主要内容，如果未能解决你的问题，请参考以下文章

javascript 20180507アニメーションで淡出，淡出（ハンバーガー）

html CSSでのアニメーション（@keyframes）

css CSSアニメーション

css CSSグラデーションアニメ

css ホバー时矢印が横へ移动アニメーション

markdown CSSで棒グラフ（アニメーション付き）