今日の開発内容

• ページ読み込み時のトランジションを追加

トランジション

Material Design - Transitions では、トランジションについて次のように述べている。

トランジションとは、アプリの個々の要素やフルスクリーンビューをつなぐ短いアニメーションのことです。トランジションは、ユーザーがアプリの動作を理解するのに役立つため、優れたユーザーエクスペリエンスの基本です。うまくデザインされたトランジションは、エクスペリエンスを高品質で表現力豊かなものにします。トランジションは、強力なモーション実装の最優先事項です。

実装詳細

要素をふわっと下から上にフェードインするアニメーションを実装した。

• page.tsx

import Link from 'next/link';
import styles from './app.module.css';

const HomePage = () => {
  return (
    <div className={styles.main}>
      <h1>ようこそ！</h1>
    </div>
  );
};

• app.module.css

  • opacity: 0;

    : より遷移直後真っ白にする

  • transform: translateY(10px);

    : 初期位置を 10px 下げる

.main {
  opacity: 0;
  animation: fadeIn 0.5s forwards ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes について

• from

  : アニメーション開始時のスタイル

• to

  : アニメーション終了時のスタイル

identifier

にはキーフレームを識別するための任意の名前を記載する。

.className {
  animation: identifier /* ... */;
}

@keyframes identifier {
  /* ... */
}

参考

• Material Design - Transitions
• MDN - @keyframes
• CSS アニメーションの使用
• animation