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

非常有趣的帖子，我找到了一个解决方案，将内容添加到占位符之前，然后启动动画。内容是右侧绝对位置的空白框，我们为宽度设置动画。所以我们可以检索你想要的行为：

@-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;
}

奇怪的是我们不能申请：在内容吨输入元素之前，但占位符！别忘了为所有支持浏览器应用前缀：

:: - webkit-input-placeholder
： - moz-placeholder
:: - MOZ-占位符
： - MS-输入占位符

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

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

1 个答案: