html - 如何为输入占位符制作弹跳效果?
问题描述
如何为输入占位符制作弹跳效果?我的输入占位符需要具有bounceIn 效果。这个占位符怎么动画呢?现在我的动画不起作用。
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.search {
padding: 10px;
}
.search:focus::placeholder {
animation: bounceIn 2s infinite;
}
<input class="search" type="text" name="Search" value="" placeholder="Search...">
解决方案
您只需要从以下位置删除::placeholder
:
.search:focus::placeholder {
animation: bounceIn 2s infinite;
}
此外,您可能会发现最好不要无限重复动画。
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.search {
padding: 10px;
}
.search:focus {
animation: bounceIn 2s infinite;
}
<h3>Click in input field to trigger animation</h3>
<input class="search" type="text" name="Search" value="" placeholder="Search...">
推荐阅读
- julia - Julia 通过关键字参数的数量识别方法
- linux - 使用通配符 * 复制文件为什么不起作用?
- python-3.x - 将文件夹内的多个 docx 文件读入多个数据帧时出错
- r - 在同一图中绘制每日累积降水量和每日每小时降水量
- phalcon - getJsonRawBody 期间的 Phalcon 4 数据奇怪符号
- sql - 如何定义 CHECK CONSTRAINT 以强制执行至少 3 个值实例的规则?
- git - Git:如何将文件从旧头添加到当前头
- javascript - 反应原生
if 语句在内部不起作用 - wordpress - Wordpress & Vue & Nuxt - 集成 - wp_enqueue_script
- wordpress - 在 WordPress 网站中显示旧内容