Transition a transformed object without blurry / jumpy text

.parent{ transform-style: preserve-3d; .child{ top: 50%; transform: translateY(-50%); backface-visibility: hidden; filter: blur(0); } &:hover{ transform: translateY(-80%); } }
Sometimes when transitioning a transformed object (mostly using the transform horizontal center technique) on hover, you get jumpy / glitchy text movements, and when using transform3d to it or backface-visibility to fix that, you get blurred text, this solves that. Well... it worked for me

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.