CSS: Textarea animation doesn't work like Input animation

Question

I've got a problem with textarea animation.

I have some material designed form and I also use there some user-activated animations. They are working perfectly in input fields, but same settings for textarea doesn't work, I don't know why.

Because everything (at least I checked it 5 times) have properties togeather, for example:

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

etc...

I created a JSFiddle, where I copied my code, can please somebody look for my mistake? I'm thanksful for your time, have a nice day!

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

Btw: It's written in less, but I hope that's not a problem, however I used only pure CSS for example.

Answer 1

You have textarea:valid selector and have no any validation attribute, so it valid always

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>