中二病CSS

かっこいいエフェクトをCSSアニメーションだけで作れないかなと色々模索したので
いくつか作ったサンプルを載せておきます。
Chromeで動作はしますが、ブラウザによっては動かないと思います。

過去にこんな記事も書きましたのでよかったらこちらもどうそ
[イケてるアニメーションを研究してみる](https://qiita.com/teradonburi/items/677509e4ce9b752bf6a2)

# カラー→セピア
画像を退廃的な感じに見せます。
ブラーのエフェクトとノイズ画像を重ねることで更に劣化の表現を増しています。

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

# カラー→グレー
画像をスチームパンク的な雰囲気にします。
セピア版のspeiaフィルターをgreyscaleフィルターに変更しただけです。

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


# シルエット
画像をシルエットのみにします。PNGなどの透過画像にのみ有効です。
brightnessを0%にすると黒シルエット。その状態からさらにinvertすれば白シルエットになります。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="teradonburi" data-slug-hash="zYvgzXQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="silhouette">
  <span>See the Pen <a href="https://codepen.io/teradonburi/pen/zYvgzXQ">
  silhouette</a> by teradonburi (<a href="https://codepen.io/teradonburi">@teradonburi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# ブラー→ブラーなし
こうゆうのは重い画像読み込みのlazyload時などの表現で使われることが多いのですが、
imgタグのsrcset属性やlazy属性で解像度が低い画像から高い画像に切り替わるような擬似的な表現をblurで行っています。

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

# 徐々に形が変わる出現・退出
clip-pathを使ったアニメーションです。
円形から矩形に変わります。
さらにclip-pathしたものに対してshadowをつけるには親要素側で指定してやります

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

# 光学迷彩
キ○グダムハーツの画面移動っぽいエフェクトだよ・・・ハハッ。
mask-imageでマスク画像で背景画像の切り取りをしています。

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

# グレー→カラー
あわせ技、グレー背景に色がついていく演出

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="teradonburi" data-slug-hash="gOaVRjL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="grey to color animation">
  <span>See the Pen <a href="https://codepen.io/teradonburi/pen/gOaVRjL">
  grey to color animation</a> by teradonburi (<a href="https://codepen.io/teradonburi">@teradonburi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


# フェードイン・フェードアウト
よくあるやつです。opacityをアニメーションしているだけです。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="teradonburi" data-slug-hash="gOaVgNW" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="fade-in fade-out">
  <span>See the Pen <a href="https://codepen.io/teradonburi/pen/gOaVgNW">
  fade-in fade-out</a> by teradonburi (<a href="https://codepen.io/teradonburi">@teradonburi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# クロスフェード
複数の画像が時系列で切り替わります。
参考：[Cross fading images](http://css3.bradshawenterprises.com/cfimg/)

アルゴリズムは以下

```
n枚の画像があるとき
a=１枚の画像が表示する時間
b=クロスフェードする時間
累計のanimation-durationはt=(a+b)*n

animation-delay = t/n or = a+b

keyframesのパーセンテージとopacityの指定:
0% → opacity: 1
a/t*100% → opacity: 1
(a+b)/t*100% = 1/n*100% → opacity: 0
100%-(b/t*100%) → opacity: 0
100% → opacity: 1
```

なお、このアルゴリズムだとalternateは使いません

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

# 斬鉄剣
clip-pathで予め画像を２枚に分けておいてtransformで斬られたように見せる

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

# 文字背景アニメーション
`background-clip:text`と`color: transparent`で背景を文字で切り抜くことができます。
さらにgreyscaleで通常のグレー文字からレインボー文字にアニメーションしてみました。
何かの呪文とかヒエログリフぽい表現、ウェブフォントにも適応できます。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="teradonburi" data-slug-hash="gOaVxdz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="clip-text animation">
  <span>See the Pen <a href="https://codepen.io/teradonburi/pen/gOaVxdz">
  clip-text animation</a> by teradonburi (<a href="https://codepen.io/teradonburi">@teradonburi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# タイピング風に表示する
`display: none`状態だとanimationの初動が動作しないので使っていない。opacityを指定している。
このレベルになると生のCSSつらい

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

# リストをかっこよく出す
シュッと横から出す

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

# おまけ
べ、別にあんたのために作ってあげたんじゃないんだからね！

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