动画占位符文本：转到侧面并松散不透明度

Question

我正在创建一个搜索框，其中占位符文本会在焦点上设置动画。我已经使用css实现了这一点。当它聚焦时，占位符文本会一直向右移动，同时失去不透明度。当它失去焦点时，它会移动到原来的位置并再次应用不透明度。

问题是当你没有聚焦时，（第一次聚焦，然后不聚焦），搜索框会获得更大的宽度。因此，如果父div设置为overflow: auto，则会显示x轴滚动条。我显然可以做overflow-x: hidden，但这有点像黑客。

如何在没有溢出的情况下获得相同的动画？

JSFiddle

＆＃13;

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

<强>已更新

Plnker

run:
          10
 1
  2
   3
BUILD SUCCESSFUL (total time: 0 seconds)