FN1407004 | CSS3: テキストを順に浮かび上がらせては消すアニメーション | HTML5 : テクニカルノート

CodePen「fade loading」に、CSS3を使ってテキストを順に浮かび上がらせるようなアニメーションの手法が紹介されています。animationプロパティでテキストの影を、ひと文字ずつ時間差で増減させることにより浮き沈みが表現されているのです(サンプル001)。「fade loading」のコードをさらに簡単にして、仕組みをご説明します。 サンプル001■CSS3: Fading in and out characters in sequencial order 01 Webフォントの文字を影で浮き上がらせる まず、テキストのフォントには「Nunito」を選びました。SILオープンフォントライセンスにもとづき、Google Fontsから読込めます(図001)。スタイルは「Bold 700」を用いいることにします。 図001■Google Fontsの「Monoton」 Web