html - 设置占位符文本的动画:转到一侧并松散不透明

我正在创建一个搜索框，使占位符文本的动画焦点突出。我已经使用CSS实现了这一点。聚焦后，占位符文本将一直移到最右边，同时失去了不透明度。当它失去焦点时，它将移至其原始位置，并再次应用不透明度。

问题是，当您取消聚焦（先聚焦，然后再聚焦）时，搜索框会变得更大。因此，如果父div设置为overflow: auto，则会显示x轴滚动条。我显然可以做overflow-x: hidden，但这有点不合时宜。

如何获得相同的动画而又不会溢出？

JSFiddle

#wrapper {
  width: 350px;
  background-color: brown;
  overflow: auto;
}
#search {
  margin: 0 .5rem;
  padding: .5rem;
  width: 95%;
  background-color: green;
  color: white;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 1.15rem;
  transition: translateX 6s ease-in;
  margin-bottom: 15px;
}
#search:focus {
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
#search:focus::-webkit-input-placeholder {
  -webkit-transform: translateX(70%);
  transform: translateX(70%);
  opacity: 0;
}
#search:focus::-webkit-input-placeholder:-moz-placeholder {
  -webkit-transform: translateX(70%);
  transform: translateX(70%);
  opacity: 0;
}
#search:focus::-webkit-input-placeholder::-moz-placeholder {
  -webkit-transform: translateX(70%);
  transform: translateX(70%);
  opacity: 0;
}
#search:focus::-webkit-input-placeholder:-ms-input-placeholder {
  -webkit-transform: translateX(70%);
  transform: translateX(70%);
  opacity: 0;
}
#search:focus::-webkit-input-placeholder::-ms-input-placeholder {
  -webkit-transform: translateX(70%);
  transform: translateX(70%);
  opacity: 0;
}
#search::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.8);
  -webkit-transition: ease-in 0.3s;
  transition: ease-in 0.3s;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
#search:-moz-placeholder {
  color: rgba(255, 255, 255, 0.8);
  -webkit-transition: ease-in 0.3s;
  transition: ease-in 0.3s;
  transform-origin: 0 50%;
}
#search::-moz-placeholder {
  color: rgba(255, 255, 255, 0.8);
  -webkit-transition: ease-in 0.3s;
  transition: ease-in 0.3s;
  transform-origin: 0 50%;
}
#search:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.8);
  -webkit-transition: ease-in 0.3s;
  transition: ease-in 0.3s;
  transform-origin: 0 50%;
}
#search::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.8);
  -webkit-transition: ease-in 0.3s;
  transition: ease-in 0.3s;
  transform-origin: 0 50%;
}

<div id="wrapper">
  <input type="search" placeholder="Search Me" id="search">
</div>

最佳答案

更新

Plnker

:focus::-webkit-input-placeholder {
  opacity: 0;
  transform: translate(70%);
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}