Keep placeholder of Input CSS only - css

Question

I have an input field with a placeholder. On focus of it, I need a transition of placeholder and it should stay at a different position.
I cannot modify the HTML as it's getting generated from a plugin.
I have achieved the transition, but the placeholder disappears after it.
Need it by CSS-only.
Demo
.container {
margin-top: 80px;
}
input {
width: 500px;
font-size: 16px;
}
input::-webkit-input-placeholder {
-webkit-transition: all 0.3s ease, font-size 0.3s ease;
transition: all 0.3s ease, font-size 0.3s ease;
}
input:hover::-webkit-input-placeholder {
-webkit-transition: all 0.3s ease, font-size 0.3s ease;
transition: all 0.3s ease, font-size 0.3s ease;
}
input:focus::-webkit-input-placeholder {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
-webkit-transition: all 0.4s ease, font-size 0.4s ease;
font-size: 12px;
transition: all 0.4s ease, font-size 0.4s ease;
}
<h3>Todo: Make placeholder persistent</h3>
<div class="container">
<input type="text" placeholder="This placeholder should stay" />
</div>

Answer 1

Since we cannot change the HTML we will have to use a pseudo-element...and a new pseudo-class to target the .container when the input receives :focus
:focus-within
The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus
.container {
margin-top: 80px;
position: relative;
}
.container::before {
content: "This placeholder should stay";
position: absolute;
font-size: 16px;
color: grey;
top: 0;
opacity: 0;
}
.container:focus-within::before {
font-size: 12px;
top: -100%;
opacity: 1;
transition: all 0.4s ease;
}
input {
width: 500px;
font-size: 16px;
}
input:focus::-webkit-input-placeholder {
opacity: 0
}
<h3>Todo: Make placeholder persistent</h3>
<div class="container">
<input type="text" placeholder="This placeholder should stay" />
</div>

Answer 2

You need to achieve this effect with the inputs <label>. You can't achieve it with a placeholder as this is how placeholders work, you can't not hide them when there is focus.
If you position: absolute the <label> over the input then you can transform: translateY() it to achieve the same effect you have there.
Edit: To add this should provide you slightly better UX and accessibility by doing this with a label instead of relying on the placeholder as well.
This is also a very simple version of what you want to achieve: http://plnkr.co/edit/WCdSajNRyM4mj4GBXCHh?p=preview