【初心者でもわかる】CSSで下から"ニュッ"と出てくる文字(要素)の作り方

どうも7noteです。ふわっとじゃなくてにゅっと出てくる文字を作ります

まるで地面から生えてくるような文字を作ります。
こんなかんじ↓

みえない位置で下からにゅっと生えてくるように上に出てくる文字です。
要素ごとふわっと出す、というよりも文字のアニメーションみたいなイメージの方が近いかなと思います。

"ニュッ"とでてくる文字の作り方

index.html

<div class="popout"><span>HELLO!</span></div>

style.css

.popout {
  border-bottom: solid 1px #000; /* 装飾用の下線 */
  display: inline-block;         /* 装飾用。なくても可。 */
  padding: 0 5px;                /* 装飾用。なくても可。 */
  overflow: hidden;              /* はみ出た分を非表示 */
}

.popout span {
  position: relative; /* bottomを指定するために必要 */
  animation: popanime 1s ease-out forwards; /* 最後ゆっくりになるアニメを1秒かけて1回だけやったあと固定 */
}

@keyframes popanime {
  from {
    bottom: -20px; /* 親要素外に配置させて見えなくしておく */
  }
  to {
    bottom: 0px;　 /* 下から0pxに指定 */
  }
}

まとめ

CSSのアニメーションのみ設定しているので、アニメーションを開始するタイミングはページ読み込み時になってしまうので、もし**開始タイミングを調整したい場合はjabascriptと組み合わせて「クラスを付与した時にアニメーションさせる」**みたいな書き方をしてみてください。

おそまつ！

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