有一个盒子里面有一些文字。当我悬停它时，我想用一个动画来缩放/放大它。当动画结束时，模糊效果从容器中移除。过渡后有没有移除模糊效果？
代码（http://codepen.io/ptongalex/pen/dnzdmv）：
null
.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>null
一个解决方案可以是开始你的盒子大，然后让它缩小到你想要的大小。然后，当您悬停该框时，您将其缩放到1。这样您就可以防止方框及其内容在缩放时被像素化/模糊化：
null
.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>