入力欄が並ぶ登録フォームなどで、クリックしてフォーカスされた入力欄は、ボーダーの色などで強調されますが、その表示の際のエフェクト集です。サンプルの入力欄のそれぞれをクリックすると、タイトル名のような動きのアニメーションで青いボーダーが付きます。

左から

右から

上から

下から

両サイドから

左右の真ん中から

全体の真ん中から

まばたき

上下それぞれから

一周するように

下側のみ

上側と下側のみ

括弧のように

広がるように

サンプルのhtmlソース（「上から」のみ）

<div class="box">
    <h3>上から</h3>
    <div class="st-form__input--wrapper from-top">
        <input type="text" class="st-form__input text" />
        <span class="input-border"></span>		</div>
</div>