【CSS】文字をふわぁ~っとゆっくり表示させる

webサイトのコンセプトで時間により背景を変えたいなんて事もあるかもしれません。
今回はCSSアニメーションを使って時間が経つと色が変わる背景を作ってみたいと思います。

表示のイメージ動画

ゆっくりテキストが表示されるイメージはこんな感じです。

CSSアニメーションの使用タグ一覧

CSSアニメーションで使用するタグの一覧は以前作成したページ「時間で背景色を変化させるアニメーションをCSSだけで作る」でご紹介していますので、ご参照ください。

HTMLコードの紹介

今回使うHTMLは「p」のみです。

CSSコードの紹介

以下のCSSコードを作成します。

CSS

CSSコードの解説

アニメーションのコード

「p」にはアニメーションの動きのコードを追加します。

  • animation-name・・・名前の定義
  • animation-duration・・・再生時間(5sは5秒)
  • animation-iteration-count:infinite;・・・無限ループ

透過のコード

「@keyframes 定義した名前」は「animation-name」で定義した名前を入れます。

透過する時は「opacity」プロパティを使います。
0なら透過100%、1なら透過0%という事になり、ここでは5秒かけて透過を0%にするというアニメーションになります。

まとめ

今はCSSで色々なアニメーションが作れる様になり、高度なwebサイトを作成する事ができる様になりました。
jsに頼らずともできる事が増えたので、ちょいちょい使いたくなります。

CSSコーディングのオススメ本

CSS辞典 第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

予測しやすい、保守しやすい、最利用しやすい、拡張しやすい―コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!

初心者からちゃんとしたプロになる HTML+CSS標準入門

HTML&CSSの使い方が全部わかる。プロを目指すなら、最初に選ぶ本!