파이어폭스 브라우저 쓰시는 분들 혹시나 도움이 될까해서 남겨봅니다.

유리나 님~ 좋은 내용 공유해주셔서 감사합니다.

.item input:focus::placeholder {

    visibility: hidden;

    /* color: transparent; */

}

위에 처럼 하신 것 맞으세요. 제가 조금 덧붙이자면...

placeholder에 color 속성은 placeholder의 텍스트의 색상을 변경하는 용도입니다. 그래서 transparent로 하시면 사라진 것처럼 보이지만 실제로는 있고 텍스트만 투명으로 된거에요. 보이는 결과는 마찬가지입니다.

그래서 visibility: hidden; 사용하시는게 정석입니다. 하지만 visibility: hidden;은 트랜지션을 못주기 때문에 트랜지션을 주기 위해서는 아래처럼 하셔야 합니다. 참고로 display: none은 적용이 안됩니다. 이유는 placeholder 자체를 사라지게 할 수는 없습니다. 그래서 사라지지 않고 크기와 자리는 유지하지만 안보이게 하는 visibility: hidden을 사용합니다.

.item input::placeholder {

      transition: 0.5s

    }

    .item input:focus::placeholder {

      /*color: transparent;*/

      opacity: 0;

    }