Почему opacity работает только в Chrome?

Question

[kkoshakk]

Вот такой код, работает только в Chrome

.cd-search input {
    border: none;
    padding-left: 2.2em;
    border-radius: 0;
    background-color: #F44336;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    color: #ffffff;
  }
  .cd-search input::-webkit-input-placeholder {
    color: #FFFFFF;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .cd-search input::-moz-placeholder {
    color: #FFFFFF;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .cd-search input:-moz-placeholder {
    color: #FFFFFF;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .cd-search input:-ms-input-placeholder {
    color: #FFFFFF;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .cd-search input:focus::-webkit-input-placeholder {
    opacity: 0; 
    transition: opacity 0.3s ease;
  }
  .cd-search input:focus::-moz-placeholder {
    opacity: 0; 
    transition: opacity 0.3s ease;
  }
  .cd-search input:focus:-moz-placeholder {
    opacity: 0; 
    transition: opacity 0.3s ease;
  }
  .cd-search input:focus:-ms-input-placeholder {
    opacity: 0; 
    transition: opacity 0.3s ease;
  }
}

Answer 1

[MNB]

Никто и не обещал вам, что transition может работать с placeholder.
У плейсхолдеров поддержка браузерами вообще стремная caniuse.com/#search=placeholder
Или рисуйте сами, либо забейте

Answer 2

[Николай Шабалин]

Попробуйте менять не opacity, а
color: #ffffff
на
color: transparent
Сам не проверял, но шанс на успех есть.