このCSSアニメーションのアイデアすごい!CSSの疑似クラスで実装するフローティングラベル

プレースホルダーのテキストがフォーム入力時にラベルに移動するアニメーションは、いろいろな実装方法があります。最近ではCSSの疑似クラスを使った実装がでてきましたが、SVGを加えると更に楽しいアニメーションにできます。

こういうのを見つけると、なんだかハッピーな気分になりますよね。

デモのアニメーション


HTML

フォームはinput要素、下線はsvgで実装されています。

CSS

label要素の各子要素を「position: absolute;」にし、ラベルのアニメーションは「input:not(:placeholder-shown) + span」と「input:focus + span」で、下線のアニメーションはCSSのキーフレームで実装されています。

「:placeholder-shown疑似クラス」については、以前の記事を参考にどうぞ。

実際の動作は、下記ページでご覧ください
対応ブラウザは、Chromeのみです。

ラベルのアニメーションであれば、IE, Edge以外で動作します。

See the Pen Elastic Input [Google Chrome] by Andreas Storm (@andreasstorm) on CodePen.

sponsors

top of page

©2018 coliss