入力フィールドの下枠を滑らせることはできません

Question

私は入力フィールドのセットを持っていて、CSSアニメーションのみを使用してフォーカスを左から右にスライドさせるためにborder-bottomをアニメーション化したいと思います。私は次のコードを試しましたが、何も起こりません。 CSSアニメーションの新機能です。

HTML

ログイン

CSS

.fields 
{ 
    color: #646c70; 
    border: none; 
    padding: 10px; 
    width: 83%; 
    position: relative; 
} 
.fields:after { 
    display:block; 
    content: ''; 
    border-bottom: solid 3px #019fb6; 
    transform: scaleX(0); 
    transition: transform 250ms ease-in-out; 
} 
.fields:focus:after { transform: scaleX(1); } 
.fields:after{ transform-origin: 0% 50%; } 

私は何をしたのか分かりません。ここでは、inputのような単一のタグ要素上の擬似要素を使用することはできないので、あなたがlabelでinputをラップし、境界線としてspanを使用して...とwidthの代わりscaleをアニメーション化できfiddle

Answer 1

です。

label { 
 
    display: inline-block; 
 
    width: 83%; 
 
    overflow: hidden; 
 
} 
 
.fields { 
 
    color: #646c70; 
 
    border: none; 
 
    outline: none; 
 
    padding: 10px; 
 
    width: 100%; 
 
} 
 
.fields + span { 
 
    display: block; 
 
    border-bottom: solid 3px #019fb6; 
 
    width: 0; 
 
    -webkit-transition: width 250ms ease-in-out; 
 
    transition: width 250ms ease-in-out; 
 
} 
 
.fields:focus + span { 
 
    width: 110%;   /* used calc first, but won't work on Edge */ 
 
    -webkit-transition: width 250ms ease-in-out; 
 
    transition: width 250ms ease-in-out; 
 
}

<label> 
 
    <input class="fields" id="password" type="password" placeholder="Password"> 
 
    <span></span> 
 
</label>