このCSSアニメーションのアイデアすごい！CSSの疑似クラスで実装するフローティングラベル
Post on:2018年7月19日
sponsors
プレースホルダーのテキストがフォーム入力時にラベルに移動するアニメーションは、いろいろな実装方法があります。最近ではCSSの疑似クラスを使った実装がでてきましたが、SVGを加えると更に楽しいアニメーションにできます。
こういうのを見つけると、なんだかハッピーな気分になりますよね。
HTML
フォームはinput要素、下線はsvgで実装されています。
|
1 2 3 4 5 6 7 8 |
<label for="inp" class="inp"> <input type="text" id="inp" placeholder=" "> <span class="label">Label</span> <svg width="120px" height="26px" viewBox="0 0 120 26"> <path d="M0,25 C21,25 46,25 74,25 C102,25 118,25 120,25"></path> </svg> <span class="border"></span> </label> |
CSS
label要素の各子要素を「position: absolute;」にし、ラベルのアニメーションは「input:not(:placeholder-shown) + span」と「input:focus + span」で、下線のアニメーションはCSSのキーフレームで実装されています。
「:placeholder-shown疑似クラス」については、以前の記事を参考にどうぞ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
* { box-sizing: border-box; } .inp { position: relative; margin: auto; width: 100%; max-width: 280px; } .inp .label { position: absolute; top: 16px; left: 0; font-size: 16px; color: #9098a9; font-weight: 500; transform-origin: 0 0; transition: all 0.2s ease; } .inp svg { position: absolute; left: 0; bottom: 0; height: 26px; fill: none; } .inp svg path { stroke: #c8ccd4; stroke-width: 2; } .inp svg path d { transition: all 0.2s ease; } .inp .border { position: absolute; bottom: 0; left: 120px; height: 2px; right: 0; background: #c8ccd4; } .inp input { -webkit-appearance: none; width: 100%; border: 0; font-family: inherit; padding: 12px 0; height: 48px; font-size: 16px; font-weight: 500; background: none; border-radius: 0; color: #223254; transition: all 0.15s ease; } .inp input:not(:placeholder-shown) + span { color: #5a667f; transform: translateY(-26px) scale(0.75); } .inp input:focus { background: none; outline: none; } .inp input:focus + span { color: #07f; transform: translateY(-26px) scale(0.75); transition-delay: 0.1s; } .inp input:focus + span + svg path { stroke: #07f; animation: elasticInput 0.4s ease forwards; } .inp input:focus + span + svg + .border { background: #07f; } @-moz-keyframes elasticInput { 50% { d: path("M2,2 C21,17 46,25 74,25 C102,25 118,25 120,25"); } } @-webkit-keyframes elasticInput { 50% { d: path("M2,2 C21,17 46,25 74,25 C102,25 118,25 120,25"); } } @-o-keyframes elasticInput { 50% { d: path("M2,2 C21,17 46,25 74,25 C102,25 118,25 120,25"); } } @keyframes elasticInput { 50% { d: path("M2,2 C21,17 46,25 74,25 C102,25 118,25 120,25"); } } |
実際の動作は、下記ページでご覧ください
対応ブラウザは、Chromeのみです。
ラベルのアニメーションであれば、IE, Edge以外で動作します。
See the Pen Elastic Input [Google Chrome] by Andreas Storm (@andreasstorm) on CodePen.
sponsors
