CSS：Textareaアニメーションが入力アニメーションのように機能しない

Question

textareaアニメーションに問題があります。

私はいくつかの材料設計されたフォームを持っており、私はまた、いくつかのユーザー起動アニメーションを使用しています。彼らはinputフィールドで完全に動作していますが、textareaと同じ設定が機能しません。理由はわかりません。

すべてが（少なくとも私はそれを5回確認）例えば、togeather性質を持っているので：

input, textarea { 
     font-size: 20px; 
} 

等...

私は私のコードをコピーしJSFiddleを作成し、してくださいすることができます誰かが私の間違いを探しますか？私はあなたの時間のために感謝しています、素敵な一日を！

FIDDLE：ところでhttps://jsfiddle.net/L1bup7y7/1/

：それは以下に書かれていますが、私は、しかし、私は例えば純粋なCSSを使用し、それは問題ではありません願っています。

Answer 1

あなたがテキストエリアがあります。

input, textarea { 
 
      font-family:Segoe UI; 
 
      font-size: 20px; 
 
      margin: 20px ; 
 
      display: block; 
 
      border: none; 
 
      padding: 10px 0; 
 
      border-bottom: solid 1px #cd3706; 
 
      -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); 
 
      transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); 
 
      background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #cd3706 10px); 
 
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #cd3706 10px); 
 
      background-repeat: no-repeat; 
 
      color: black; 
 
     } 
 
     input.short{ 
 
      width: 300px; 
 
      background-position: -300px 0; 
 
      background-size: 300px 100%; 
 
     } 
 
     textarea{ 
 
      resize: none; 
 
      overflow: hidden; 
 
      width: 500px; 
 
      background-position: -500px 0; 
 
      background-size: 500px 100%; 
 
     } 
 

 
     input:focus, textarea:focus, input:valid, textarea:valid { 
 
     box-shadow: none; 
 
     outline: none; 
 
     background-position: 0 0; 
 
     } 
 
     
 
     input::-webkit-input-placeholder, textarea::-webkit-textarea-placeholder { 
 
     -webkit-transition: all 0.3s ease-in-out; 
 
     transition: all 0.3s ease-in-out; 
 
     } 
 

 
     input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder, textarea:focus::-webkit-textarea-placeholder, textarea:valid::-webkit-textarea-placeholder { 
 
     color: #cd3706; 
 
     font-size: 15px; 
 
     -webkit-transform: translateY(-25px); 
 
     transform: translateY(-25px); 
 
     visibility: visible !important; 
 
     }

<form> 
 
    <input class="short" placeholder="mail" type="text" required> 
 
    <input class="short" placeholder="subj" type="text" required> 
 
    <textarea placeholder="text" required></textarea> 
 
</form>

Answer 2

私は

input:focus, textarea:focus, input:valid{ 
     box-shadow: none; 
     outline: none; 
     background-position: 0 0; 
     } 

からtextarea:validを削除し、それが適切に動作します確認してください。

input, textarea { 
 
      font-size: 20px; 
 
      margin: 20px ; 
 
      display: block; 
 
      border: none; 
 
      padding: 10px 0; 
 
      border-bottom: solid 1px #cd3706; 
 
      -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); 
 
      transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); 
 
      background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #cd3706 10px); 
 
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #cd3706 10px); 
 
      background-repeat: no-repeat; 
 
      color: black; 
 
     } 
 
     input.short{ 
 
      width: 300px; 
 
      background-position: -300px 0; 
 
      background-size: 300px 100%; 
 
     } 
 
     textarea{ 
 
      resize: none; 
 
      overflow: hidden; 
 
      width: 500px; 
 
      background-position: -500px 0; 
 
      background-size: 500px 100%; 
 
     } 
 

 
     input:focus, textarea:focus, input:valid{ 
 
     box-shadow: none; 
 
     outline: none; 
 
     background-position: 0 0; 
 
     } 
 
     
 
     input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
 
     -webkit-transition: all 0.3s ease-in-out; 
 
     transition: all 0.3s ease-in-out; 
 
     } 
 

 
     input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder{ 
 
     color: #cd3706; 
 
     font-size: 15px; 
 
     -webkit-transform: translateY(-25px); 
 
     transform: translateY(-25px); 
 
     visibility: visible !important; 
 
     } 
 
     textarea:focus::-webkit-input-placeholder{ 
 
     color: #cd3706; 
 
     font-size: 15px; 
 
     -webkit-transform: translateY(-5px); 
 
     transform: translateY(-15px); 
 
     visibility: visible !important; 
 
     }

<form> 
 
    <input class="short" placeholder="mail" type="text" required> 
 
    <input class="short" placeholder="subj" type="text" required> 
 
    <textarea placeholder="text"></textarea> 
 
</form>

Answer 3

変更

常に有効、それはので、有効なセレクタをしていない任意の検証属性を持ちます

textarea:focus::-webkit-input-placeholder 

から

、それが仕事