How to remove blur effect after scale transition?

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>

You do not use any blur. Filter: blur() takes a px value. The larger value the bigger blur. You have specified 0 — Viktor, Jan 28 '17 at 11:24
Ok, then it has nothing to do with the fact that you specified filter: blur(). Have a look at http://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d — Viktor, Jan 28 '17 at 11:41

score 1 · Accepted Answer · answered Jan 28 '17 at 13:11

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>

It still looks blurry to me during animation. – Thielicious Nov 05 '18 at 10:50 — Thielicious, Nov 05 '18 at 10:50

score 1 · Answer 2 · answered Nov 02 '17 at 09:56

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.

How to remove blur effect after scale transition?

2 Answers2