こんにちは！TANE-beエンジニアのシモダです。

勝手に自己紹介&会社紹介のサイトを作成し、もう1年が経とうとしてます…

xでは多くの反響をいただけ、とてもモチベーションになりました！ありがとうございました！！

せっかく作ったので、今回はこのサイトで使用したアニメーションを解説していきたいと思います。

JavaScriptを使用せず、HTMLとCSSだけで作成しており、比較的かんたんに実装できるものばかりですので、参考になれば幸いです！

perspectiveを使用した名刺デザイン

MVでは弊社の名刺を再現してみました。

こちらもCSSのみで実装が可能でしたので、ご紹介いたします！

使用しているのはperspectiveというプロパティです。

MDN – perspective

こちらのプロパティを使用することで、簡単に奥行きを表現することができます。

See the Pen
perspective by shimoda (@emxhqppw-the-lessful)
on CodePen.

親要素にtransform-style: preserve-3dを指定することで、子要素の3D変形を画面に反映させることができるようになります。

また、transform: perspective(1000px)の部分で、3D空間の奥行き深度を指定しています。

こちらの数値を調整するだけで、見た目が大きく変わるのでぜひ調整してみてください！

グリッジエフェクト

CSSのみで実装できる簡易的なグリッジエフェクトです。

原理はシンプルで、背景に色のついた同じテキストを重ねて置き、細かくtransformで移動させることで実現しています。

See the Pen
css glitch by shimoda (@emxhqppw-the-lessful)
on CodePen.

工夫した点は、data属性を使用して擬似要素にテキスト情報を引き継ぐことで、変更時もHTMLの改修のみで完結できるようにした点です！

.title__glitch {
 &:before,
 &:after {
  content: attr(data-text);
 }
}

attrでHTMLの属性を取得できるのは便利ですね！

MDN – attr()

現在は実験的にcontent外での使用もできますが、正式な実装はまだなので注意してください！(2025年9月時点)

3Dギャラリーアニメーション

前述のperspectiveを活用すると、奥行きのあるアニメーションを簡単に実現することができます。

See the Pen
3d img-gallery by shimoda (@emxhqppw-the-lessful)
on CodePen.

やっていることとしては、画像を円周上にならべて、大元のdivを回転させることにより動いているように見せております！

円周上に配置する方法として

transform: rotateY(calc(var(--slider-num) * (360deg / var(--slider-count)))) translateZ(calc(var(--slider-depth) * var(--slider-radius)));

こちらのコードで並べております。少し文字文字しいので解説したいと思います！

まず初めに

rotateY( calc( var(--slider-num) * (360deg / var(--slider-count)) ) )

360°をアイテムの枚数で割り、さらに自分の番号をかけることで、円周上における自分の立ち位置を算出しています。

translateZ( calc( var(--slider-depth) * var(--slider-radius) ) )

位置が決まれば、Z方向にグイッと押し出すイメージで、奥行き*半径分を移動させます。

以上の二つにより、きれいに円周上に配置することが可能です！

波打ちアニメーション

maskを使用した波紋のようなアニメーションです！

初めてこの表現を見たときは、天才か…！！と思いました。

とてもリッチな表現で、個人的にお気に入りのアニメーションになっております！

See the Pen
css ripples by shimoda (@emxhqppw-the-lessful)
on CodePen.

実装方法はとても簡単で、scaleの異なるおんなじ画像を重ねて配置します。

大きさを大きくした方の画像をマスクで隠し、ホバーをトリガーにしてマスクのサイズを大きくし出現させつつ、元のサイズに収束させていくとこのような表現が可能となります。

.ropples__img {
 &:first-of-type {
  mask: radial-gradient( circle, transparent 30%, rgba(0, 0, 0, 1) 50%, transparent 70% ) no-repeat center / 0%; z-index: 1;

  img { 
   scale: 1.2;
   transform-origin: center 40%;
  }
 }

 &:hover {
  &:first-of-type {
   mask-size: 400%;
   transition: mask-size 2s;

   img {
    scale: 1;
    transition: scale 0.7s;
   }
  }
 }
}

ランダム配置のアニメーション

最後に紹介するのは、CSSのランダム関数です。

See the Pen
css ramdom by shimoda (@emxhqppw-the-lessful)
on CodePen.

CSSでランダムな数字表現できるのを知りませんでした…

ランダムな数字を生成しているのはこちらの部分です！

@for $i from 1 through 100 {
 &:nth-of-type(#{$i}) {
  animation-delay: calc(-1ms * #{random(3000)});
 }
}

SCSSのfor文と合わせて、アニメーションの遅延時間をランダムに指定することで、雨のように散らばった表現が可能となります！

まとめ

CSSのみで実装できるアニメーションを5つ紹介させていただきました！

どれも比較的容易に取り入れることができ、発想次第でとても面白い表現が可能となるかと思います！

今後も面白そうなプロパティや表現方法を探求していこうと思います！

皆さんのインスピレーションに刺激を与えられたら幸いです！

最後まで読んでいただき、ありがとうございました！！