Animate placeholder text: Go to side and loose opacity - html

Question

I'm creating a search box, with the placeholder text getting animated on focus. I've implemented that using css. When it gets focused, the placeholder text gets moved over all the way to the right while loosing opacity. When it looses focus, it gets moved its original place and the opacity is applied again.
The problem is when you unfocus, (firs focus, then unfocus,) the searchbox gets a larger width. So if the parent div is set to overflow: auto, the x-axis scroll bar shows up. I can obviously do overflow-x: hidden, but that's sort of a hack.
How can I get the same animation without having an overflow?
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>

Answer 1

UPDATED
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;
}