Html CSS:Textarea动画没有'；不能像输入动画那样工作

我对

textarea

动画有问题

我有一些材料设计的形式，我也使用了一些用户激活的动画。它们在

input

字段中工作得很好，但是

textarea

的相同设置不起作用，我不知道为什么

因为所有东西（至少我检查了5次）都有属性，例如：

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

等等

我创建了一个JSFIDLE，在这里我复制了我的代码，有人能帮我找出错误吗？谢谢你抽出时间，祝你有愉快的一天

小提琴：

---

顺便说一句：它用更少的语言编写，但我希望这不是问题，不过我只使用了纯CSS作为例子。

我从中删除了

textarea:valid

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

检查它是否正常工作

输入，文本区域{
字体大小：20px；
利润率：20px；
显示：块；
边界：无；
填充：10px0；
边框底部：实心1px#cd3706；
-webkit转换：所有0.3立方贝塞尔（0.64,0.09,0.08,1）；
过渡：所有0.3立方贝塞尔（0.64,0.09,0.08,1）；
背景：-webkit线性梯度（顶部，rgba（255，255，255，0）96%，#cd3706 10px）；
背景：线性梯度（至底部，rgba（255，255，255，0）96%，#cd3706 10px）；
背景重复：无重复；
颜色：黑色；
}
input.short{
宽度：300px；
背景位置：-300px 0；
背景尺寸：300px 100%；
}
文本区{
调整大小：无；
溢出：隐藏；
宽度：500px；
背景位置：-500px 0；
背景尺寸：500px 100%；
}
输入：焦点，文本区域：焦点，输入：有效{
盒影：无；
大纲：无；
背景位置：0；
}
输入：：-webkit输入占位符，文本区域：：-webkit输入占位符{
-webkit过渡：所有0.3轻松输入输出；
过渡：所有0.3秒的缓进缓出；
}
输入：焦点：：-webkit输入占位符，输入：有效：：-webkit输入占位符{
颜色：#cd3706；
字体大小：15px；
-webkit转换：translateY（-25px）；
转换：translateY（-25px）；
可见性：可见！重要；
}
textarea:focus:：-webkit输入占位符{
颜色：#cd3706；
字体大小：15px；
-webkit转换：translateY（-5px）；
转换：translateY（-15px）；
可见性：可见！重要；
}

---

您有textarea:valid选择器，并且没有任何验证属性，因此它始终有效

输入，文本区域{
字体系列：SegoeUI；
字体大小：20px；
利润率：20px；
显示：块；
边界：无；
填充：10px0；
边框底部：实心1px#cd3706；
-webkit转换：所有0.3立方贝塞尔（0.64,0.09,0.08,1）；
过渡：所有0.3立方贝塞尔（0.64,0.09,0.08,1）；
背景：-webkit线性梯度（顶部，rgba（255，255，255，0）96%，#cd3706 10px）；
背景：线性梯度（至底部，rgba（255，255，255，0）96%，#cd3706 10px）；
背景重复：无重复；
颜色：黑色；
}
input.short{
宽度：300px；
背景位置：-300px 0；
背景尺寸：300px 100%；
}
文本区{
调整大小：无；
溢出：隐藏；
宽度：500px；
背景位置：-500px 0；
背景尺寸：500px 100%；
}
输入：焦点，文本区域：焦点，输入：有效，文本区域：有效{
盒影：无；
大纲：无；
背景位置：0；
}
输入：：-webkit输入占位符，文本区域：：-webkit文本区域占位符{
-webkit过渡：所有0.3轻松输入输出；
过渡：所有0.3秒的缓进缓出；
}
输入：焦点：：-webkit输入占位符，输入：有效：：-webkit输入占位符，文本区域：焦点：：-webkit文本区域占位符，文本区域：有效：：-webkit文本区域占位符{
颜色：#cd3706；
字体大小：15px；
-webkit转换：translateY（-25px）；
转换：translateY（-25px）；
可见性：可见！重要；
}

更改

textarea:focus::-webkit-textarea-placeholder

到

---

而且应该是工作

谢谢！我可以问一下，为什么文本区域中的占位符隐藏在某些东西下面，当它处于活动状态时？谢谢！我可以问一下，为什么textarea中的jsfiddle.net/L1bup7y7/4占位符隐藏在某个活动的东西下面？@Honzis Novák I changed transform:translateY（-15px）；用于文本区域。检查它是否正常工作。明白了！：）谢谢，祝你今天愉快谢谢！我可以问一下，为什么当文本区域中的jsfiddle.net/L1bup7y7/4占位符处于活动状态时，它会隐藏在某个东西下面？

textarea:focus::-webkit-input-placeholder