手軽に使えるCSSアニメーション



# はじめに
手軽に使えるようなCSSアニメーションをローディングアニメーションを中心に制作・まとめました。
CSSアニメーションというのは、JavascriptなしでHTML要素にアニメーションをつけることができるCSSの機能です。

CSSアニメーションについての概要は以下の記事が参考になります。今回の記事は制作のまとめのような形なのでCSSアニメーションについての説明は割愛します。

> CSSアニメーション 入門
> https://qiita.com/soarflat/items/4a302e0cafa21477707f

共同制作： @tehoooo




## ローディングその１

基本的な円が回転するアニメーションです。
実装的にもシンプルで円を回転させているだけです。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZEepMYE" data-user="sinobata" 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/sinobata/pen/ZEepMYE">
  loading</a> by tabata (<a href="https://codepen.io/sinobata">@sinobata</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>





## ローディングその2

3つの点が順番に大きさが変動していきます。
`animation-delay` を使って順番に大きさが変更されるようなアニメーションになっています。


<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="PoeaeGe" data-user="sinobata" 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/sinobata/pen/PoeaeGe">
  loading</a> by tabata (<a href="https://codepen.io/sinobata">@sinobata</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



## ローディングその3

今はあまり見かけない床屋のポール（サインポール）のようなアニメーションです。
パーセンテージを表すときにも使うことができるため汎用性は高めです。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="PoegYWZ" data-user="sinobata" 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/sinobata/pen/PoegYWZ">
  loading2</a> by tabata (<a href="https://codepen.io/sinobata">@sinobata</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>





## ローディングその4
遺伝子のような形をしたアニメーションです。
回転→移動→逆回転というアニメーションを`animation-delay` を使うことで遺伝子っぽくしています。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="JjveOeB" data-user="tehoooo" 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/tehoooo/pen/JjveOeB">
  Helix_practice</a> by TEHO (<a href="https://codepen.io/tehoooo">@tehoooo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



## ローディングその5
飛び跳ねるボールのようなアニメーションです。
影がある分リッチっぽくなります。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="vYjboJb" data-user="tehoooo" 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/tehoooo/pen/vYjboJb">
  Bouncing_Loader_Practice</a> by TEHO (<a href="https://codepen.io/tehoooo">@tehoooo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



## ローディングその6

一風変わったアニメーションです。
SVGで円を作ってそのパス上に文字を配置して回転しています。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="poPJJrP" data-user="sinobata" 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/sinobata/pen/poPJJrP">
  circul text</a> by tabata (<a href="https://codepen.io/sinobata">@sinobata</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



## タイピングアニメーション

CSSだけのタイピングアニメーションです。文章の途中などにも使うことができます。


<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="abpxyER" data-user="sinobata" 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/sinobata/pen/abpxyER">
  typing</a> by tabata (<a href="https://codepen.io/sinobata">@sinobata</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="ZEomaga" data-user="tehoooo" 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/tehoooo/pen/ZEomaga">
  social_link_practice</a> by TEHO (<a href="https://codepen.io/tehoooo">@tehoooo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>