【初心者向け】cssアニメーションの基本的な書き方とサンプル例

## はじめに

弊社サービス「モッピー」内にはキャラクターがいるので、アニメーションをつけることが多々あります。

例えばページ読み込んだ時のフェードイン

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582698/d1b9cc5b-e0d1-4ba5-92a6-fc6913a41135.gif" width=100% max-width=600 alt="メインビジュアルの表示アニメーション">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582698/40936d08-2f6f-62b6-e677-b7dc33685323.gif" width=100% alt="メインビジュアルの表示アニメーション">


脇の方でふわふわ動いたり

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582698/49f9f9bb-f415-c585-b4af-ca9736999fff.gif" width=350 alt="飛行機に乗ってふわふわ動くモッピーくん" 
 style=display:block>

ぽよよんとしたり

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582698/50f9b9f7-9a31-915e-640e-b2a5d22ab60b.gif" width=400 alt="飛行機に乗ってふわふわ動くモッピーくん">


ちょっとしたアニメーションでもあるとリッチで良きですからね:ok_hand:
弊社に転職してくるまでcss animationを書く場面がほぼなかったため、改めて書き方を学んだのでまとめます。

## 基本的な書き方

### Step1:point_up:.　keyframes に動きを書く
下からフェードインする動きを書いてみます。

```
@keyframes fade-in {
    0% {
		opacity: 0;
		transform: translateY(60px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
```
`fade-in` は任意の名前にしてもらってOKです。

動きの切り替えが`0%`  `100%`の2つで済むなら以下のように`from` `to`でも書けます。
わかりやすい方でok
```
@keyframes fade-in {
    from {
		opacity: 0;
		transform: translateY(60px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
```

### Step2:v:.　動かしたい要素に animation を設定する
`animation` で使うプロパティは以下になります。

| プロパティ | 設定できること | 私的よく使うもの
| :--- | :--- | :--- |
| animation-name |  @keyflameでつけた任意の名前を書くと紐づけられる | 任意 |
| animation-duration |  アニメーション1回の時間の長さ |  |
| animation-timing-function | アニメーションの加速曲線・進め方 | ease-in-out（加速減速）<br> linear（一定の速度）|
| animation-delay |  読み込まれてから何秒後にアニメーションを開始するか |  |
| animation-iteration-count |  アニメーションを繰り返すか1回限りか | infinite(繰り返す) |
| animation-fill-mode |  アニメーション実行後<br>キーフレームで指定したスタイルを適用するか否か |forwards（指定スタイルそのまま） |
| animation-direction |  アニメーション再生の向き | alternate(0%→100%→0%で再生) |

これらを使用して書いてみるとこうなります。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="bGzaeYL" data-user="dcdakxpd-the-flexboxer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/dcdakxpd-the-flexboxer/pen/bGzaeYL">
  Untitled</a> by suzuki (<a href="https://codepen.io/dcdakxpd-the-flexboxer">@dcdakxpd-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



動いて嬉しい:relaxed:
だけどこれだと書くこと多くて面倒:frowning2:
なので`animation`を使用しショートハンドで同じことを書きます。

### ショートハンドで1行で指定する
先ほどと同じものを`animation`で1行で書きました。
`animation-iteration-count` は初期値が `1` なので省略です。

フェードインする動き
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="zYepKwK" data-user="dcdakxpd-the-flexboxer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/dcdakxpd-the-flexboxer/pen/zYepKwK">
  Untitled</a> by suzuki (<a href="https://codepen.io/dcdakxpd-the-flexboxer">@dcdakxpd-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script><br>


以下の順番で指定していくと、想定通りに動作します。
カンマなどで区切る必要はなく、プロパティ値を書いていけばOKです。
※ 全て書く必要はなく、省略も可能です。

---
📝 **書く順番**
1. `animation-name` : アニメーション名
1. `animation-duration` : 開始〜終わりにかける時間
1. `animation-timing-function` : 動きの速度の指定
1. `animation-delay` : 開始を遅らせる
1. `animation-iteration-count` : 繰り返しの指定
1. `animation-direction` : アニメの再生方向の指定
1. `animation-fill-mode` : アニメ終了後のCSS
---

### アニメーションを複数連続でつける
フェードインからの横揺れアニメーションなど、複数指定する場合はカンマで繋ぐことができます。
2つ目のアニメーションの適用タイミングを`animation-delay` にて調整するのがポイントです。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="XWOZqWL" data-user="dcdakxpd-the-flexboxer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/dcdakxpd-the-flexboxer/pen/XWOZqWL">
  animation 複数ショートハンド</a> by suzuki (<a href="https://codepen.io/dcdakxpd-the-flexboxer">@dcdakxpd-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



## よく使用している動きサンプル
バウンドする動き

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="PoVQeXd" data-user="dcdakxpd-the-flexboxer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/dcdakxpd-the-flexboxer/pen/PoVQeXd">
  Untitled</a> by suzuki (<a href="https://codepen.io/dcdakxpd-the-flexboxer">@dcdakxpd-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script><br>
冒頭の飛行機に乗ってふわふわしている動き

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="VwgQxKP" data-user="dcdakxpd-the-flexboxer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/dcdakxpd-the-flexboxer/pen/VwgQxKP">
  Untitled</a> by suzuki (<a href="https://codepen.io/dcdakxpd-the-flexboxer">@dcdakxpd-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script><br>

スタンプみたいな動き

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="LYqQmaj" data-user="dcdakxpd-the-flexboxer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/dcdakxpd-the-flexboxer/pen/LYqQmaj">
  Untitled</a> by suzuki (<a href="https://codepen.io/dcdakxpd-the-flexboxer">@dcdakxpd-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script><br>

鼓動みたいな動き
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="mdvXLYj" data-user="dcdakxpd-the-flexboxer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/dcdakxpd-the-flexboxer/pen/mdvXLYj">
  Untitled</a> by suzuki (<a href="https://codepen.io/dcdakxpd-the-flexboxer">@dcdakxpd-the-flexboxer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script><br>


参考サイトは以下になります

https://developer.mozilla.org/ja/docs/Web/CSS/animation

https://webliker.info/css-short-hand/

https://pc.moppy.jp/