【CSSアニメーション】HTMLとCSSだけで作ってみた「扇風機」

# はじめに

こんにちは。
最近はCSSアニメーションが楽しくて、ハマっています。:satisfied:
今回も、[コーラ](https://qiita.com/michimichix521/items/a8a3f706bc1dac751188)に続き、扇風機を作ってみました！

# 「扇風機」

<p class="codepen" data-height="762" data-theme-id="0" data-default-tab="css,result" data-user="michimichix521" data-slug-hash="VwZyxBX" style="height: 762px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="扇風機">
  <span>See the Pen <a href="https://codepen.io/michimichix521/pen/VwZyxBX/">
  扇風機</a> by みっちー (<a href="https://codepen.io/michimichix521">@michimichix521</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


こちらが扇風機とそのプログラムになります。
コードをコピペすると同じように表示できると思います！
扇風機のファンの部分にマウスオンすると(hover)、首を振るようにもしています。:wink:



こちらにもコードを記載しておきます。


```index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>扇風機</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>

	<div class="fan fan-1">
		<div class="core_part">
			<div class="wing wing-1"></div>
			<div class="wing wing-2"></div>
			<div class="wing wing-3"></div>
			<div class="wing wing-4"></div>
			<div class="wing wing-5"></div>
			<div class="wing wing-6"></div>
		</div>
	</div>
	<div class="fan fan-2"></div>
	<div class="fan fan-3">
		<div class="buttons">
			<div class="button"></div>
			<div class="button"></div>
			<div class="button"></div>
			<div class="button"></div>
		</div>
	</div>

</body>
</html>
```

```styles.css
body{
	margin:50px 0 0;
	background-color:antiquewhite;
}

.fan{
	margin:0 auto;
	background-color:black;
}

.fan-1{
	z-index:2;
	width:275px;
	height:275px;
	border:10px solid blue;
	border-radius:50%;
}

.fan-1:hover{
	animation-name:swing;
	animation-duration:5s;
	animation-timing-function:liner;
	animation-iteration-count:infinite;
}

@keyframes swing{
	0%{transform:none;}
	25%{
		transform:rotate(90deg);
		transform:translateX(25px);
	}
	50%{transform:none;}
	75%{
		transform:rotate(-90deg);
		transform:translateX(-25px);
	}
	100%{transform:none;}
}

.core_part{
	margin:0 auto;
	background-color:gainsboro;
	width:50px;
	height:50px;
	border-radius:50%;
	position:relative;
	top:112px;
	opacity:1.0;
	animation-name:rotation;
	animation-duration:0.01s;
	animation-timing-function:liner;
	animation-iteration-count:infinite;
}

.wing{
	margin:0 auto;
	background-color:lightsteelblue;
	width:30px;
	height:100px;
	border-radius:5px;
	position:relative;
}

.wing-1{
	top:50px;
	transform:rotate(0deg);
}

.wing-2{
	right:65px;
	bottom:88px;
	transform:rotate(60deg);
}

.wing-3{
	right:64px;
	bottom:264px;
	transform:rotate(120deg);
}

.wing-4{
	bottom:400px;
	transform:rotate(180deg);
}

.wing-5{
	left:65px;
	bottom:462px;
	transform:rotate(240deg);
}

.wing-6{
	left:65px;
	bottom:488px;
	transform:rotate(300deg);
}

@keyframes rotation{
	from{transform:rotate(0deg);}
	to{transform:rotate(360deg);}
}

.fan-2{
	z-index:1;
	width:50px;
	height:140px;
	border-radius:5px;
	border-top:10px solid blue;
	border-bottom:3px solid dimgray;
	position:relative;
	bottom:10px;
}

.fan-3{
	width:250px;
	height:140px;
	border:5px solid blue;
	border-radius:30px;
	position:relative;
	bottom:35px;
	display:flex;
	justify-content:center;
	align-items:center;
}

.buttons{
	width:100px;
	display:flex;
	justify-content:center;
	justify-content:space-between;
	align-items:center;
}

.button{
	width:15px;
	height:15px;
	background-color:gray;
	border-radius:50%;
}
```


以上です！
ここまで読んでいただき、ありがとうございました！