How to remove blur effect after scale transition? - css

Question

Have a box with some text inside. When I hover it, I want to scale / zoom it bigger with an animation. When the animation ends, the blurred effect is removed from the container. Is there anyway to remove the blur effect after the transition ?
The Code (http://codepen.io/ptongalex/pen/dNZdmV):
.box {
border: solid red 2px;
width: 100px;
position:relative;
text-align:center;
left: 50%;
top:200px;
}
.box:hover {
-webkit-filter: blur(0);
-webkit-transform: translateZ(0);
transform: scale(3);
transition: transform 1s;
}
<div class='box'>
<h1>Text</h1>
</div>

Answer 1

One solution could be to start you box as big and then have it scaled down to your desired size. When you then hover the box you scale it up to 1. This way you prevent the box and its content from being pixelated/blurry when scaling:
.box {
border: solid red 6px;
width: 300px;
position:relative;
text-align:center;
font-size: 54px;
transform: scale(0.33);
margin: 0 auto;
transition: transform 1s;
}
.box:hover {
transform: scale(1);
}
<div class='box'>
<h1>Text</h1>
</div>

Answer 2

This should work.
filter: none;
-webkit-filter: blur(0);
-moz-filter: blur(0);
-ms-filter: blur(0);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
But in some cases the element will be blurred during animation if you use transition.