WEBデザインTIPSこのサイトはJavaScriptを使用しています。すべての機能をご利用いただく為、ブラウザのJavaScriptの設定を有効にしてください。2019コーディングCSSだけでテキストをフェードインさせる方法です。CSSanimationのキーフレームを使った方法をご紹介します。CSSanimationは、要素を動的に変化(アニメーション)させるCSSです。この記事ではCSSanimationのキーフレームの基本的な使い方について、テキストをフェードインさせる方法を元に書いています。1.キーフレームアニメーションの基本1-1.構成CSSanimationは、animationプロパティと、@keyframesの2つの要素で成り立っています。それぞれの役割は、animationプロパティで動きの設定をして、@keyframesで時間の経過とそこでの状態を指定します。CSSanimationの構成animationプロパティ・・・動きの設定@keyframes・・・時間の経過とそこでの状態を指定コードを記述すると、例えば下記のようになります。下記CSS4行目~6行目がanimationプロパティ、8行目~21行目が@keyframesです。animationプロパティと@keyframesは、CSS4行目animation-nameで指定した名前をCSS8行目@keyframesの後に記述することで関連付けられます。}1-2.CSSanimationのプロパティCSSanimationでは、以下の8つのプロパティでアニメーションの様々な設定を行うことができます。プロパティの全てを一度に把握するのは大変なので、使う機会に応じて徐々に慣れていくといいと思います。running各プロパティは、初期値以外にも複数指定できる値があります。フェードインに必要なプロパティについては、後述します。CSSanimationプロパティ上記8つのプロパティに加えて、animationプロパティというものがあります。これは、8つのプロパティを簡略化して一行で記述できるショートハンドプロパティです。下記のようにプロパティの値だけを書きます。running;上記コードのルビ(1)と(2)は時間を指定するプロパティです。プロパティは任意の順序で記述できますが、時間を指定する下記プロパティは順番が決まっています。animationプロパティの省略animationプロパティは、8つありますが省略することもできます。省略されたプロパティは初期値が適用されます。時間を指定するプロパティを一つしか記述しなかった場合は、animation-durationプロパティとみなされます。CodePen.上のsample01は、ロードされるとふわっと黒で文字が現れ始め完璧に表示された後、青色に変化する、といったアニメーションが2回繰り返されます。※上のCODEPENのフレームの右下角の「Rerun」をクリックして再生してみてください。sample01のコードは下記になります。class="fade-in01">Sample01</p>htmlはpタグの一行のみです。}では、CSSを順番に見ていきましょう。opacity:0;opacityは、要素の透明度を指定するプロパティです。非表示ということです。これを指定する理由は、ページがロードされた時から要素を非表示にするためです。これを指定しておかないと、ページが読み込まれてアニメーションが始まるまで、一時的に要素が表示されてしまいます。{animation-nameは名前を付けるプロパティです。「sample01」と名前を付けています。ここで付けた名前を@keyframesの後ろに半角スペースを空けて記述することで互いが関連付けられるようになります。5s;animation-durationは、アニメーションをしている時間を設定するプロパティです。sは、second(秒)でアニメーションしている時間を5秒に設定しています。animation-iteration-count:2;animation-iteration-countは、アニメーションの回数を指定できるプロパティです。sample01の場合、2回繰り返すよう指定しています。forwards;animation-fill-modeは、アニメーションの終了時の状態を指定できるプロパティです。指定できる値と意味は下記になります。アニメーションの前後は、CSSanimationが適用されません。アニメーションの再生後は、再生後(キーフレーム100%)の状態を維持。アニメーションの再生後は、再生後(キーフレーム100%)の状態を維持。animation-delayを指定している場合は、再生までの時間はキーフレームの指定は適用されない。sample01は、「forwards」を指定しているので、アニメーション再生後は、キーフレーム100%の状態を維持して、青色のままになっています(CSS20行目)。(補足)animationプロパティsample01をanimationプロパティ(ショートハンド)で記述すると下記のようになります。forwards;@keyframesの設定CSS9行目からは@keyframesの設定になります。@keyframesでは、時間の経過とそこでの状態を指定できます。時間の経過はパーセントで細かく指定出来ますが、0%はfrom、100%はtoと書くことも出来ます。}}sample01は、下記の3つのポイントで時間の経過とそこでの状態を指定しています。設定しているので5秒間で行われます。設定しているので、2回繰り返されます。指定しているので、@keyframesの100%で指定したcolor:#00f;が適用されて青色のままになります。スポンサーリンク4.まとめこの記事では、8つあるanimationプロパティのうち4つを使用しました。この記事で使用したanimationプロパティanimation-nameanimation-durationanimation-iteration-countanimation-fill-mode他のプロパティを追加して、例えばanimation-timing-functionでアニメーションの進行速度を指定してみたり、いろいろ遊べます。応用編としてフェードインしながら上下や左右からスライドインする方法や、CSSで描いた円をアニメーションで中心から拡大表示する方法についても記事にしました。よろしければご覧ください。–NatsukiMemoこの記事がお役に立てると幸いです。Postsブログ名変更しました。