【初心者でもわかる】iphoneのロック画面で使われているフワッと表示する文字アニメーションを再現

どうも7noteです。文字をふわっとだすアニメーションを作成

iphoneのホーム画面で使われている文字のアニメーションがきれいだったので同じようなものを作ってみます。
文章の中央からフワッと文字が表示されるようなアニメーションです。

書き方

index.html

<p>ホームボタンを押してロック解除</p>

style.css

p {
  display: inline-block; /* beforeとafterのサイズを同じにするため */
  position: relative;    /* 基準位置とする */
}

p::before,
p::after {
  content: '';           /* 疑似要素に必須 */
  width: 100%;           /* 幅いっぱいに指定 */
  height: 100%;          /* 高さいっぱいに指定 */
  display: block;        /* ブロック要素にする */
  position: absolute;    /* 相対位置に指定 */
  top: 0;                /* 上から0pxの位置 */
  left: 0;               /* 左から0pxの位置 */
}


p::before {
  background: linear-gradient(to left, transparent ,#FFF 50%) no-repeat; /* 背景と同じ色のグラデーション（左半分） */
  animation : fuwa1 1s forwards;             /* アニメーションを1秒間隔で行い停止 */
}

p::after {
  background: linear-gradient(to right, transparent ,#FFF 50%) no-repeat; /* 背景と同じ色のグラデーション（右半分） */
  animation : fuwa2 1s forwards;             /* アニメーションを1秒間隔で行い停止 */
}

/* アニメーション(左:before用) */
@keyframes fuwa1{
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -250px 0; /* 適度な大きさの数字を指定 */
  }
}
/* アニメーション(左:before用) */
@keyframes fuwa2{
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 250px 0; /* 適度な大きさの数字を指定 */
  }
}

解説

色付きでみていただく方が早いかもしれませんね。↓

左側にbefore、右側にafterを配置しそれぞれに背景色と同じ色のグラデーションを指定しておきます。
あとはアニメーションを左右それぞれ個別に指定し、beforeは左に移動するように、afterは右に移動するようにアニメーションを設定すれば完成。

まとめ

iphoneでは文字自体が透明になっているのですがCSSでそれを再現しても今回のような左右に広がるような透かし方や表示はできない（難しい？）のでかんたんに実装できる疑似要素を使った方法で作成しました。

背景が単色のところでなけでば再現できませんが、実践でも問題なく使えるレベルのCSSかなと思います！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ