中二病CSS

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

過去にこんな記事も書きましたのでよかったらこちらもどうそ
イケてるアニメーションを研究してみる

カラー→セピア

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

See the Pen sepia animation by teradonburi (@teradonburi) on CodePen.

カラー→グレー

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

See the Pen greyscale animation by teradonburi (@teradonburi) on CodePen.

シルエット

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

See the Pen silhouette by teradonburi (@teradonburi) on CodePen.

ブラー→ブラーなし

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

See the Pen blur animation by teradonburi (@teradonburi) on CodePen.

徐々に形が変わる出現・退出

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

See the Pen circle animation by teradonburi (@teradonburi) on CodePen.

光学迷彩

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

See the Pen optical-camouflage by teradonburi (@teradonburi) on CodePen.

グレー→カラー

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

See the Pen grey to color animation by teradonburi (@teradonburi) on CodePen.

フェードイン・フェードアウト

よくあるやつです。opacityをアニメーションしているだけです。

See the Pen fade-in fade-out by teradonburi (@teradonburi) on CodePen.

クロスフェード

複数の画像が時系列で切り替わります。
参考：Cross fading images

アルゴリズムは以下

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は使いません

See the Pen crossfade by teradonburi (@teradonburi) on CodePen.

斬鉄剣

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

See the Pen slash animation by teradonburi (@teradonburi) on CodePen.

文字背景アニメーション

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

See the Pen clip-text animation by teradonburi (@teradonburi) on CodePen.

タイピング風に表示する

display: none状態だとanimationの初動が動作しないので使っていない。opacityを指定している。
このレベルになると生のCSSつらい

See the Pen letter animation by teradonburi (@teradonburi) on CodePen.

リストをかっこよく出す

シュッと横から出す

See the Pen list animation by teradonburi (@teradonburi) on CodePen.

おまけ

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

See the Pen jump by teradonburi (@teradonburi) on CodePen.