JavaScriptとCSSで魅せる！スライドインフロムレフトトランジションの実装ガイド

2024-05-23

CSS3 スライドインフロムレフトトランジション

このアニメーションを作成するには、主に以下の2つの方法があります。

CSS トランジションを使用すると、要素の状態が変化したときに滑らかにアニメーションさせることができます。スライドインフロムレフトトランジションを作成するには、以下の手順を行います。

アニメーションさせたい要素に transition プロパティを設定します。このプロパティには、アニメーション対象のプロパティ、アニメーション時間、アニメーションのタイミング関数などを指定します。
要素の初期状態を left: -100%; に設定します。これは、要素を画面左端から100%外側に出すことを意味します。

.element {
  transition: left 0.5s ease-in-out;
  left: -100%; /* 初期状態 */
}

.element.show {
  left: 0; /* 表示状態 */
}

このコードでは、要素 .element に transition プロパティを設定し、アニメーション時間 (0.5秒)、アニメーションのタイミング関数 (ease-in-out) を指定しています。また、初期状態では要素を画面左端から100%外側に出し、表示状態では画面左端に表示するように設定しています。

要素を表示するには、JavaScript で .element クラスに show クラスを追加します。

const element = document.querySelector('.element');
element.classList.add('show');

@keyframes ルールを使用して、アニメーションのキーフレームを定義します。キーフレームには、アニメーションの開始時点と終了時点における要素の状態を指定します。

.element {
  animation: slideInLeft 0.5s ease-in-out;
}

@keyframes slideInLeft {
  from {
    left: -100%;
  }
  to {
    left: 0;
  }
}

このコードでは、要素 .element に animation プロパティを設定し、アニメーション名 (slideInLeft)、アニメーション時間 (0.5秒)、アニメーションのタイミング関数 (ease-in-out) を指定しています。また、@keyframes ルールを使用して、アニメーションのキーフレームを定義しています。

補足

スライドインフロムレフトトランジション以外にも、スライドインフロムトップ、スライドインフロムライト、スライドインフロムボトムなどのアニメーションを作成することができます。
アニメーションの速度やタイミングを調整するには、アニメーション時間やアニメーションのタイミング関数を変更します。
アニメーションを繰り返し実行するには、animation-iteration-count プロパティに infinite を指定します。

これらの方法を組み合わせて、Web サイトに魅力的なアニメーションを作成することができます。

CSS3 スライドインフロムレフトトランジションサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 スライドイン フロム レフト トランジション</title>
  <style>
    .element {
      width: 200px;
      height: 100px;
      background-color: #f00;
      transition: left 0.5s ease-in-out;
      left: -100%; /* 初期状態 */
    }

    .element.show {
      left: 0; /* 表示状態 */
    }
  </style>
</head>
<body>
  <div class="element"></div>

  <button onclick="showElement()">要素を表示</button>

  <script>
    const element = document.querySelector('.element');

    function showElement() {
      element.classList.add('show');
    }
  </script>
</body>
</html>

CSS

.element {
  width: 200px;
  height: 100px;
  background-color: #f00;
  transition: left 0.5s ease-in-out;
  left: -100%; /* 初期状態 */
}

.element.show {
  left: 0; /* 表示状態 */
}

JavaScript

const element = document.querySelector('.element');

function showElement() {
  element.classList.add('show');
}

説明

このコードは、ボタンをクリックすると、要素を左側から滑り込ませるアニメーションを作成します。

HTML

<div class="element"></div>: アニメーションさせたい要素です。
<button onclick="showElement()">要素を表示</button>: 要素を表示するボタンです。

.element: アニメーションさせたい要素のスタイルを定義します。
- width: 要素の幅
- height: 要素の高さ
- background-color: 要素の背景色
- transition: アニメーションのプロパティ、アニメーション時間、アニメーションのタイミング関数などを指定します。
- left: 要素の位置 (初期状態では画面左端から100%外側に出します)
.element.show: 要素を表示する状態のスタイルを定義します。
- left: 要素の位置 (画面左端に表示します)

const element = document.querySelector('.element');: アニメーションさせたい要素を取得します。
function showElement() {: ボタンをクリックしたときに実行される関数です。
- element.classList.add('show');: 要素に show クラスを追加します。これにより、要素が表示状態になります。

実行方法

このコードをHTMLファイルに保存します。
ブラウザでHTMLファイルを開きます。

カスタマイズ

以下の方法で、このコードをカスタマイズすることができます。

要素の幅、高さ、背景色を変更する
アニメーション時間やアニメーションのタイミング関数を変更する
アニメーションを繰り返し実行する
アニメーションの向きを変更する (スライドインフロムトップ、スライドインフロムライト、スライドインフロムボトムなど)

CSS3 スライドインフロムレフトトランジション他の方法

CSS トランジション

CSS transform プロパティ

CSS トランジションは、要素の状態が変化したときに滑らかにアニメーションさせるための最も簡単な方法です。

.element {
  transition: left 0.5s ease-in-out;
  left: -100%; /* 初期状態 */
}

.element.show {
  left: 0; /* 表示状態 */
}

const element = document.querySelector('.element');
element.classList.add('show');

CSS アニメーションは、より複雑なアニメーションを作成することができます。

.element {
  animation: slideInLeft 0.5s ease-in-out;
}

@keyframes slideInLeft {
  from {
    left: -100%;
  }
  to {
    left: 0;
  }
}

アニメーションさせたい要素に transform プロパティを設定します。このプロパティには、要素をどのように操作するかを指定します。

.element {
  transition: transform 0.5s ease-in-out;
  transform: translateX(-100%); /* 初期状態 */
}

.element.show {
  transform: translateX(0); /* 表示状態 */
}

const element = document.querySelector('.element');
element.classList.add('show');

それぞれの方法のメリットとデメリット

方法	メリット	デメリット
CSS トランジション	簡単	シンプルなアニメーションしか作成できない
CSS アニメーション	複雑なアニメーションを作成できる	コードが長くなる
CSS transform プロパティ	パフォーマンスが良い	複雑なアニメーションを作成するのが難しい

CSS3 スライドインフロムレフトトランジションを作成するには、3つの方法があります。それぞれの方法にはメリットとデメリットがあるので、目的に合わせて適切な方法を選択してください。

css css-transitions