オエー鳥で学ぶcss講座 - wheatandcatの開発ブログ

@keyframes seamless-loop {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

.rainbow-beam {
  background: linear-gradient(
    to right,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8b00ff,
    #ff0000
  );
  /* アニメ中も色帯を切らさないよう 200% に拡張 */
  background-size: 200% 100%;
  animation: seamless-loop 2s linear infinite;
}

④. 下方向へ流れるアニメーション

See the Pen oe bird animation 02 by wheatandcat (@wheatandcat) on CodePen.

デフォルトでは横に流れるので、rotate（または transform: rotate()）で角度を変えて下方向へ。

transform: rotate(-90deg);

ここまでで元依頼は達成。ただしイラスト × CSS の相性が面白かったので、さらに遊んでみました。

⑤. 虹色を高速逆流

See the Pen oe bird animation 03 by wheatandcat (@wheatandcat) on CodePen.

animation-duration を短くして速度を上げる。

animation: seamless-loop 1s linear infinite;

⑥. 画像を震えさせる

See the Pen oe bird quake by wheatandcat (@wheatandcat) on CodePen.

transform と animation の組み合わせでブルッと震える表現。

⑦. 枠にエフェクト（炎風）

See the Pen oe bird fire by wheatandcat (@wheatandcat) on CodePen.

filter: drop-shadow で画像に影を付け、擬似的な炎の縁取りを作る。

⑧. 画像の色相をアニメーション

See the Pen oe bird hue by wheatandcat (@wheatandcat) on CodePen.

filter: hue-rotate() で色相を回し、サイケ風のアニメに。

⑨. 画像を白黒風に

See the Pen oe bird sepia by wheatandcat (@wheatandcat) on CodePen.

filter: grayscale(100%) で白黒化。

⑩. ブレンドモード

See the Pen oe bird blend 01 by wheatandcat (@wheatandcat) on CodePen.

See the Pen oe bird blend 02 by wheatandcat (@wheatandcat) on CodePen.

See the Pen oe bird blend 03 by wheatandcat (@wheatandcat) on CodePen.

mix-blend-mode を指定すると、背景との合成方法を変更できる。Adobe 製品の「ブレンドモード」を CSS で指定するイメージ。

⑪. 横に動かす

See the Pen oe bird move 01 by wheatandcat (@wheatandcat) on CodePen.

translateX() と animation の組み合わせでスライド。

.move {
  animation: peek 5s ease-in-out infinite;
  display: inline-block;
  overflow: hidden;
}

/* 顔出し → 止まる → 引っ込む → 顔出し → 止まる → ゆっくり通過 */
@keyframes peek {
  0%   { transform: translateX(-300px); }
  15%  { transform: translateX(-120px); }
  25%  { transform: translateX(-120px); }
  35%  { transform: translateX(-300px); }
  45%  { transform: translateX(-80px); }
  55%  { transform: translateX(-80px); }
  100% { transform: translateX(320px); }
}

⑫. アニメーションで反転

See the Pen oe bird move 02 by wheatandcat (@wheatandcat) on CodePen.

rotateY() で Y 軸反転。

⑬. 動きの応用

See the Pen oe bird move 03 by wheatandcat (@wheatandcat) on CodePen.

⑪・⑫の応用で複合的な動きに。

⑭. カメラ移動アニメーション

See the Pen oe bird move 05 by wheatandcat (@wheatandcat) on CodePen.

object-view-box でズームや表示領域を制御し、アニメと組み合わせてカメラ移動のように見せる。

⑮. 波アニメーション

See the Pen oe bird wave by wheatandcat (@wheatandcat) on CodePen.

複数要素を並べ、scale と translateY を組み合わせると波のような表現に。

⑯. ホロ加工アニメーション

See the Pen oe bird shiny by wheatandcat (@wheatandcat) on CodePen.

CSS だけでやるには少しトリッキーだが、以下のように背景に多数の div を敷き詰め、hue-rotate を回してホログラム風に見せる。

<div class="detail">
  <div class="beam">
    <div></div><!-- 以降多数の要素 -->
  </div>
  <img src="http://starship.174cm.com/illust/oe/oe.png" alt="Bird" class="bird" />
</div>

.beam {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
}

@keyframes hue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

.beam > div {
  width: 15px;
  height: 15px;
  animation: hue 0.5s infinite linear;
  border: 0.5px solid #989797;
  filter: hue-rotate(0deg);
}

/* 子要素を 4 つごとに色分け */
.beam > div:nth-child(4n + 1) { background: #ff595e; }
.beam > div:nth-child(4n + 2) { background: #ffca3a; }
.beam > div:nth-child(4n + 3) { background: #8ac926; }
.beam > div:nth-child(4n + 4) { background: #5eafe2; }

まとめ

遊びで始めたが、やってみると CSS の奥深さを再確認できた。
今後もおもしろい使い方を見つけたら、定期的にサイトをアップデートしていこうと思う。