見出し画像
Photo by yuyakoyama0414

[HTML/CSS] 画像を点滅させる

Nasty Neo

以下のコードで画像を点滅させることができます。
意外に情報が少なく、苦戦しました。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>テスト</title>
	<style>
	<!--
		.blinking {
			-webkit-animation:blink 0.9s infinite alternate;
			-moz-animation:blink 0.9s infinite alternate;
			animation:blink 0.9s infinite alternate;
			animation-iteration-count: 5;
		}
		@-webkit-keyframes blink {
			0% {opacity:0;}
			49% {opacity:0;}
			51% {opacity:1;}
			100% {opacity:1;}
		}
		@-moz-keyframes blink {
			0% {opacity:0;}
			49% {opacity:0;}
			51% {opacity:1;}
			100% {opacity:1;}
		}
		@keyframes blink {
			0% {opacity:0;}
			49% {opacity:0;}
			51% {opacity:1;}
			100% {opacity:1;}
		}
	-->
	</style>
</head>
<body>
	<img class="blinking" src="test.jpg" />
</body>
</html>

この記事が気に入ったらサポートをしてみませんか？