色々なCSSアニメーションつくってみた 10日目【WEBサイトを作る30日チャレンジ】

# CSSだけでアニメーションを作る（trasition及び@keyframeを使用）

　・hoverした際に動くアニメーションとしました
　・アニメーション以外は前回作ったシャーロックホームズのテンプレを一部利用しています
　・画像はフリーのものを使用しました

# お世話になったサイト様
[@7968様 @keyframeとanimation](https://qiita.com/7968/items/1d999354e00db53bcbd8)
[@7968様 trasition関連](https://qiita.com/7968/items/812d6a21fc4dd9ae9c75)


# 完成物

![ezgif.com-video-to-gif (10).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540462/bd32acbc-8497-8ad2-19fa-9f215c3995c0.gif)

# コード

```html
<!DOCTYPE html>
<html>
<head>
<title>CSS 3D Ratating Image Gallery</title>
<link rel="stylesheet" type="text/css" href="30_10.css">
</head>
<body>
  <nav id="nav-drawer">
    <input type="checkbox" id="check" id="nav-input">
    <label for="check" class="checkbtn open"></label>
    <label for="check" class="checkbtn close"></label>
    <label class="logo"><a href="#" class="logo">Sherlock</a></label>
    <ul>
      <li><a class="active" href="#">ホーム</a></li>
      <li><a href="#">会社概要</a></li>
      <li><a href="#">事業内容</a></li>
      <li><a href="#">お問い合わせ</a></li>
      <li><a href="#">採用情報</a></li>
    </ul>
  </nav>

  <div class="description">マウスをあわせると変化する</div>
<div class="animate1"><a href="#">アニメーション1</a></div>
<div class="animate2"><a href="#">アニメーション2</a></div>
<div class="animate3"><a href="#">アニメーション3(2秒後変化)</a></div>
<div class="animate4"><a href="#">アニメーション4</a></div>
	<div class="container">
		<div class="box">boxを中心にくるくるアニメーション
			<span style="--i:1;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
			<span style="--i:2;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
			<span style="--i:3;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
			<span style="--i:4;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
			<span style="--i:5;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
			<span style="--i:6;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
			<span style="--i:7;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
			<span style="--i:8;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
		</div>
	</div>
</body>
</html>

```

```css
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.description{
  top:0;
  color: black;
}
a{
  text-decoration: none;
  color: black;
}
.container
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}
/* 一個目 */
.animate1{
  background-color: rgb(192, 240, 255);
  width: 150px;
  top: 0;
  margin: 10px;
  text-decoration: none;
}
.animate1:hover{
  animation-name: none;
  background-color:blue;
  color: black;
  width: 300px;
  transition-duration: 5s;
}
/* 二個目 widthが５秒で変化、bgcがすぐに変化*/
.animate2{
  background-color: rgb(192, 240, 255);
  width: 150px;
  top: 0;
  margin: 10px;
  text-decoration: none;
  transition-property:width;
}
.animate2:hover{
  animation-name: none;
  background-color:blue;
  color: black;
  width: 300px;
  transition-duration: 5s;
}
/* 3個目 2秒まってスタート*/
.animate3{
  background-color: rgb(192, 240, 255);
  width: 150px;
  top: 0;
  margin: 10px;
  text-decoration: none;
}
.animate3:hover{
  animation-name: none;
  background-color:blue;
  color: black;
  width: 300px;
  transition-delay:2s;
  transition-duration: 3s;
}
.animate4{
  background-color: rgb(192, 240, 255);
  width: 150px;
  top: 0;
  margin: 10px;
  text-decoration: none;
}
.animate4:hover {
  animation-name: fadeIn;
  animation-duration:5s;
}
@keyframes fadeIn {
  0% {
      opacity:0;
  }
  100% {
      opacity:1;
  }
}
.box{
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;

}
.box:hover
{
	position: relative;
	width: 200px;
	height: 200px;
	transform-style: preserve-3d;
  animation: animate 22s linear infinite;
}
.box span
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: center;
	transform-style: preserve-3d;
	transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
	-webkit-box-reflect: below 0px linear-gradient(transparent,transparent,#0004);
}
.box span img
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@keyframes animate
{
	0%
	{
		transform: perspective(1000px) rotateY(0deg);
	}
	100%
	{
		transform: perspective(1000px) rotateY(360deg);
	}
}
/* ↓ナビゲーションバー */
nav{
  background-color: black;
  width: 100%;
  top:0;
}
#check,
#nav-input{
  display: none;
}
.checkbtn{
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
label.logo a{
  color: white;
  font-size: 40px;
  line-height: 80px;
  font-weight: 600;
  text-decoration: none;
  margin-left:30px;
}
nav ul{
  float: right;
  margin-right: 60px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 2px;
}
nav ul li a{
  color: #f2f2f2;
  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  padding: 7px 15px;
  text-transform: uppercase;
  text-decoration: none;
}
```


# 学べたこと
　・trasitionの動きと記述の流れ
　・@keyframeとanimationの関係及び応用


# 感想
　いままであまり気にしていなかった、trasitionやkeyframeの理解が進み、レパートリーが増えました。
　今回作成したものは簡単なものですが画像等を用いると、企業向けの面白いサイトができそうです。
　くるくる実装は建築系や、面白い雑貨屋さん等のオシャレなサイトにありそうですね！
　今回は以上となります。
　
　ここは違う、ここはこうしたほうが良いかも？等々ございましたらご指摘いただけますと幸いです。
　最後までみていただき、ありがとうございました。