html - 如何将动画添加到输入占位符

Question

我正在制作一个搜索占位符，我希望用它来完成动画。我试过了，但没用。

我的 CSS 代码是:

@-webkit-keyframes search_types {
from { width:0px;}
to {width:100px;}
}
.input_search_box::-webkit-input-placeholder{
   -webkit-animation: search_types 10s infinite linear;
}

我已经尝试了很多方法，过渡有效，但我想将动画用于其他目的，无论如何有办法做到这一点。
我想做一个类型动画like this在占位符中

Answer 1

非常有趣的帖子，我找到了一个解决方案，将 :before 内容放置到占位符并制作动画。 内容是右侧绝对位置的空白框，我们为宽度设置动画。所以我们可以检索我猜你想要的行为:

@-webkit-keyframes search_types {
    from {width: 100%;}
    to {width:0px;}
}

::-webkit-input-placeholder {
    position: relative;
}
::-webkit-input-placeholder:before {
    content: "";
    position: absolute;
    background: #fff;
    width: 100%;
    height: 100%;
    right: 0;
    -webkit-animation: search_types 10s infinite linear;
}

奇怪的是，我们不能将 :before content 应用于输入元素，而是占位符! 不要忘记为所有支持的浏览器应用前缀:

• ::-webkit-input-placeholder
• :-moz-占位符
• ::-moz-占位符
• :-ms-input-placeholder

http://jsfiddle.net/Pik_at/ky5g2n8r/