Menu
I have a hover effect that when it is triggered, the box enlarges. Only issue i have is that the text seems to blur during the transition and then goes sharp again when 'transformed'.
Before posting on here i decided to have a research and came across this post which seems to be the issue with mine as well:
How to force re-render after a WebKit 3D transform in Safari
http://duopixel.com/stack/scale.html
I have applied their answer to my build and still the blurred effect happens. I have provided a link below and if anyone could advise me with what i have is possible to resolve that would be great!
eg of transition code:
-moz-transform:scale(1.05,1.05);
http://jsfiddle.net/VcVpM/1/
618
I had this problem with SVG scaling and blurry images. I scaled up a background image to 4.5 and the image rendered very blurry while scaling up. I read that you can scale down first transform: scale(0.7) and then scale up to transform: scale(1.0) . In my case this meant a huge rebuild of my animation.
The first way of creating a blurred text is making your text transparent and applying shadow to it. The shadow will make the text appear blurred. Use a <div> with an id "blur". Then, set the color property to its “transparent” value and define the text-shadow property to give a shadow to the text.
The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a <transform-function> data type.
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
While it's not equivalent, setting the width, height, left, top, font-size attributes in the :hover works without the blurring on Chrome.
.cta:hover {
width: 500px;
height: 500px;
font-size: 400%;
}
The only other work-around "might" be to use animation @keyframes and set a decent amount of them ~5 or 10, it might force a correction of the blurring between each keyframe.
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
