CSSのみでできるシンプルなアニメーション

CSS（カスケーディング・スタイル・シート）は、ウェブページのスタイルとレイアウトを制御するための言語ですが、それだけにとどまりません。アニメーション効果を追加することにより、ユーザーエクスペリエンスを向上させ、動的で魅力的なコンテンツを作成できます。

使用する場合はこのようにクラスを指定してください。

<div class="fade-in">フェードイン</div>

フェードイン・フェードアウト

フェードインとフェードアウトのアニメーションは、要素の透明度（opacity）を変化させることで、要素が徐々に表示・非表示になる効果を実現します。

/* フェードイン */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* フェードアウト */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.fade-in {
  animation: fadeIn 2s ease-in-out;
}

.fade-out {
  animation: fadeOut 2s ease-in-out;

スライドイン・スライドアウト

スライドインとスライドアウトのアニメーションは、要素の位置を変化させることで、要素が横方向にスライドする効果を実現します。

/* スライドイン */
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* スライドアウト */
@keyframes slideOut {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

.slide-in {
  animation: slideIn 1s ease-out forwards;
}

.slide-out {
  animation: slideOut 1s ease-out forwards;
}

バウンス

バウンスアニメーションは、要素の垂直方向の位置を変化させることで、要素が弾むような効果を実現します。これにより、要素がまるでゴム製のように上下に動く印象を与えることができます。

/* バウンス */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.bounce {
  animation: bounce 2s infinite;
}

回転

回転アニメーションは、要素を中心に回転させることで視覚的な効果を実現します。回転速度や方向を調整することで、さまざまな表現が可能です。

/* 回転 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotate {
  animation: rotate 1s linear infinite;
}

関連投稿:

CSSのみでテキストや画像にぼかし効果を付ける 子テーマを作ってWordPressの既存テーマをカスタマイズしてみよう オリジナルサイト作成お得プラン CSSのfilterプロパティを利用したフィルター効果一覧