smooth transition of search bar opacity on cilick

Question

I have a search bar and I want to know if there's a way to have a smooth transition when it's clicked on? I tried having a transition: 0.4s ease on the search bar CSS but that's not working. I also tried a keyframes animation but that's not working either. It's not a color transition either, I have the opacity automatically set to 85% and on click it lowers to 60%, that's what I'm trying to have a smooth transition on.

.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

Just make sure you're only editing the placeholder text, not the whole input field. :)

.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>