CSS でアニメーションをする

最終更新日:

CSS でアニメーションを実装する。
けっこう簡単。

サンプルコード

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>transition</title>
	<style type="text/css">

		.sample1 {
			transition:
				color 1s ease,
				font-size 2s ease-out;
			color: inherit;
			font-size: inherit;
		}
		.sample1:hover {
			transition:
				color 1s ease,
				font-size 2s ease-out;
			color: #f44;
			font-size: 50px;
		}
		.sample2 {
			transition:
				color 3s ease,
				padding-left 2s ease-in,
				font-size 2s ease-out;
			color: inherit;
			padding-left: inherit;
			font-size: inherit;
		}
		.sample2-active {
			transition:
				color 3s ease,
				padding-left 2s ease-in,
				font-size 2s ease-out;
			color: #46c;
			padding-left: 120px;
			font-size: 60px;
		}

	</style>
</head>
<body>
	<span class="sample1">hover me, </span>
	<span class="sample2" onclick="changeClassName(this)">click me</span>
	<script type="text/javascript">

		function changeClassName(e) {
			e.className = e.className == "sample2" ? "sample2-active" : "sample2"
		}

	</script>
</body>
</html>