入力[type = text]遷移遅延が働いていません

Question

単純な入力テキストボックスには次のスタイルを使用しています。

 input { 
      font-family: inherit; 
      font-size: large; 
      border: 2px solid #1bd55a; 
      border-radius: 5px; 
     } 
     input[type=text] { 
      width: 500px; 
      height: 30px; 
      color: #616161; 
      padding-left: 6px; 
      border-style: dashed; 
      background-color: rgba(27, 213, 90, 0.12); 
      transition: 0.3s; 
     } 
     input[type=text]:focus { 
      border-style: solid; 
      outline: none; /* gets rid of the blue outline. */ 
     } 

しかし、現在のコードでは、ダッシュとソリッドの間の遷移は即時ですが、アニメーションはありません。私は単一のプロパティをアニメーション化していますが、これはsvgのstrokeプロパティで動作させることが可能であることを知っています。これをテキスト入力に適切に適用するにはどうすればよいですか？これによると

Answer 1

残念ながら、border-styleはアニメーション可能なプロパティではありません。ただし、余分なマークアップと境界線の色を使用すると効果を得ることができます。

input { 
 
      font-family: inherit; 
 
      font-size: large; 
 
      border: 2px solid #1bd55a; 
 
      border-radius: 5px; 
 
     } 
 
     input[type=text] { 
 
      width: 500px; 
 
      height: 30px; 
 
      color: #616161; 
 
      padding-left: 6px; 
 
      background-color: rgba(27, 213, 90, 0.12); 
 
      border-color: rgba(27, 213, 90, 0.12); 
 
      transition: 0.3s; 
 
      margin: -2px; 
 
     } 
 
     input[type=text]:focus { 
 
      border-color: #1bd55a; 
 
      outline: none; /* gets rid of the blue outline. */ 
 
     } 
 

 
     div.extra-border { 
 
     display: inline-block; 
 
     border: 2px dashed #1bd55a; 
 
     border-radius: 5px; 
 
     }

<div class="extra-border"> 
 
     <input type="text" placeholder="text here" /> 
 
    </div>

ここfiddleです。 svgがあなたに与えるものと全く同じ変化ではありませんが、悪くはありません。

Answer 2

： https://www.w3schools.com/cssref/pr_border-style.asp

のborder-styleプロパティがアニメーション可能ではありません。