单击时搜索栏不透明度的平滑过渡

Question

我有一个搜索栏，我想知道点击它时是否有一种平滑过渡的方法？我尝试在搜索栏 CSS 上添加 transition: 0.4s ease，但这不起作用。我还尝试了关键帧动画，但这也不起作用。这也不是颜色过渡，我将不透明度自动设置为 85%，然后单击它降低到 60%，这就是我想要平滑过渡的原因。

.search .query {
  border: 0;
  outline: 0;
  background-color: transparent;
  font-family: inherit;
  font-size: 14px;
  margin-top: 20px;
  width: 100%;
  opacity: 85%;
  transition: 0.4s ease;
}

input:focus::-webkit-input-placeholder {
  opacity: 60%;
}

input:focus:-moz-placeholder {
  opacity: 60%;
}

input:focus::-moz-placeholder {
  opacity: 60%;
}

input:focus:-ms-input-placeholder {
  opacity: 60%;
}

<form class="search" action="javascript:return false">
  <input type="text" class="query" placeholder="search tags...">
</form>

Answer 1

只要确保您只编辑占位符文本，而不是整个输入字段。 :)

.search .query {
  border: 0;
  outline: 0;
  background-color: transparent;
  font-family: inherit;
  font-size: 14px;
  margin-top: 20px;
  width: 100%;
}

.search .query::placeholder {
  opacity: 0.85;
  transition: 0.4s ease;
}

.search .query:focus::placeholder {
  opacity: 0.6;
}

<form class="search" action="javascript:return false">
  <input type="text" class="query" placeholder="search tags...">
</form>

单击时搜索栏不透明度的平滑过渡

smooth transition of search bar opacity on cilick

html

css

tumblr