CSS：Textarea 动画不像输入动画那样工作

Question

textarea 动画有问题。

我有一些材料设计的形式，我也在那里使用了一些用户激活的动画。它们在input 字段中运行良好，但textarea 的相同设置不起作用，我不知道为什么。

因为一切（至少我检查了 5 次）都具有共同的属性，例如：

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

等等……

我创建了一个 JSFiddle，我在其中复制了我的代码，请有人看看我的错误吗？感谢您的宝贵时间，祝您有美好的一天！

FIDDLE：https://jsfiddle.net/L1bup7y7/1/

顺便说一句：它是用less写的，但我希望这不是问题，但是我只使用了纯CSS。

Answer 1

你有 textarea:valid 选择器并且没有任何验证属性，所以它总是有效的

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

改变

textarea:focus::-webkit-textarea-placeholder

到

textarea:focus::-webkit-input-placeholder

它应该可以工作

Answer 3

我从

中删除textarea:valid

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

并检查它是否正常工作。

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>