我想实现动画，使两个文本不重叠

Question

https://codepen.io/shoumiksk/pen/bGoVdgE

这是我想要实现的代码笔链接，另外，当输入字段中有一些文本时，我不希望标题向下滑动。现在当我像这样使用有效时，标题动画停止

.inputdiv input:valid + .content .contenttext {}

还有其他方法吗？

忽略输入字段的错位，这是根据我的用户界面

Answer 1

您可以为此使用伪选择器:placeholder-shown。但是你必须定义一个占位符，在你的情况下是一个空格placeholder=" "。

结果：https://codepen.io/yourbraineatsyou/pen/XWeZogq

更多信息：https://css-tricks.com/almanac/selectors/p/placeholder-shown/