文字をカッコよくフェードイン（CSSアニメーション）

概要

cssアニメーションを使って、文字をカッコよくフェードインさせる。

実装例

仕組み（全体像）

• 1. 動く背景(mask_fadeIn)をキーフレイムで定義
• 2.
  • 2-1. 指定要素(.is-fadeIn)を「position : relative;」
  • 2-2. 指定要素の擬似要素(:after)に、固定値とanimationプロパティを指定。

コード

• 使われているプロパティ
  • 「transform : scaleX(0)」 ： X方向の縮尺比率を指定。「1」：1倍。（参考）
    • 「transform : none」 ： 初期値。
  • 「transform-origin: 0 0;」 ：　プロパティ要素の変換の原点を指定。（参考）
  • 「animation: mask_fadeIn 1.0s cubic-bezier(0.77, 0, 0.175, 1) 0s;」 ： キーフレームで定義した「mask_fadeIn」を、1秒間で、指定したイージングで動かす。（参考）

html

<span class="is-fadeIn">あああああ</span>

css

/* 動く背景 (mask_fadeIn) の定義 */
@keyframes mask_fadeIn {
  0% {
    /* x方向の倍率を0に */
    transform: scaleX(0);
    /* 変換の原点を(0, 0)に指定 */
    transform-origin: 0 0;
  }
  45% {
    /* x方向の倍率を初期値(1倍)に */
    transform: none;
    transform-origin: 0 0;
  }
  50% {
    transform: none;
    transform-origin: 100% 0;
  }
  100% {
    transform: scaleX(0);
    transform-origin: 100% 0;
  }
}

.is-fadeIn {
  position: relative;
  overflow: hidden;
}

.is-fadeIn:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
　　　　/* 固定値のx方向の倍率を0に。アニメーション後の横幅が0になる。 */
  transform: scaleX(0);
  /* キーフレームで定義した「mask_fadeIn」を動かす。 */
  animation: mask_fadeIn 1.0s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

参考

• transform : scale()
• transform-origin