CSSでHTML要素を左右にスライドするアニメーション作ってみた

はじめに

今回はブラウザ画面の中央から左右にUIがスライドするアニメーションを作成します。
本記事ではHTML要素の作成にReactを使用しますが、通常のHTMLでも同じように作成可能です。
CSSのkeyframesを活用して、アニメーションを実装していきます。

ゴール

次のようなアニメーションを作ることを本記事のゴールとします。

環境

• react：18.3.1
• vite：5.3.1

ソース

アニメーションを当てるHTML要素をdiv タグで作成します。

App.tsx

import './App.css';

const App: React.FC = () => {
  return (
    <>
      {/* 右へ移動するアニメーション */}
      <div className={'slide-animation slide-animation-right'} />
      {/* 左で移動するアニメーション */}
      <div className={'slide-animation slide-animation-left'} />
    </>
  );
};

export default App;

keyframes アニメーションによって、背景色を黒から白に変えながら要素を左右にスライドします。
横スクロールバーは表示させたくないので、overflow-x: hiddenで非表示に設定。
詳細はコメントの通りです。

App.css

/* 中央から右へスライドするアニメーション */
@keyframes slideOutFromCenterRight {
  0% {
    transform: translateX(0%);
    background-color: black;
  }
  100% {
    transform: translateX(100%);
    background-color: white;
  }
}

/* 中央から左へスライドするアニメーション */
@keyframes slideOutFromCenterLeft {
  0% {
    transform: translateX(0%);
    background-color: black;
  }
  100% {
    transform: translateX(-100%);
    background-color: white;
  }
}

/* アニメーション用の基本クラス */
.slide-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

/* 中央から右へスライドするアニメーションを適用 */
.slide-animation-left {
  animation: slideOutFromCenterRight 2s forwards;
}

/* 中央から左へスライドするアニメーションを適用 */
.slide-animation-right {
  animation: slideOutFromCenterLeft 2s forwards;
}

/* 横方向のスクロールバーを表示しない */
body {
  overflow-x: hidden;
}

動作確認

サーバを立ち上げアニメーションの挙動を確認します。

npm run dev

左右にドアが開くようなアニメーションを付与したUIを作成できている事が確認できました。

終わりに

今回作成した左右へスライドするUIに img タグでドアや障子、下記の襖ような画像を持たせてスライドするようにしても面白そうだと思ってます。