I wrote an animation for the buttons and ran into a problem. When the animation is triggered, the text on the button blurs a little. I saw a lot of discussions on the Internet, but I never found a solution.

Perhaps you tell me how to fix it.
I use the following structure:

.ink z-index: 100 display: block position: absolute background: rgba(255, 255, 255, 0.4) border-radius: 100% transform: scale(0) @keyframes ripple 100% opacity: 0 transform: scale(2.5) .animate animation: ripple .9s linear

Well, then I just call through js adding the necessary block with these classes.

js code:

 //animate start $('[data-href="#mypres"]:not(.ripplelink)').each(function(){ var $this = $(this); $this.css('overflow', 'hidden'); $this.css('z-index', '0'); var ink, d, x, y; setInterval(function() { if($this.find(".ink").length === 0){ $this.prepend("<i class='ink'></i>"); } ink = $this.find(".ink"); ink.removeClass("animate"); if(!ink.height() && !ink.width()){ d = Math.max($this.outerWidth(), $this.outerHeight()); ink.css({height: d, width: d}); } x = Math.round(Math.random()*ink.width() - ink.width()/2); y = Math.round(Math.random()*ink.height() - ink.height()/2); // y = 0; // x = e.pageX - $this.offset().left - ink.width()/2; // y = e.pageY - $this.offset().top - ink.height()/2; ink.css({top: y+'px', left: x+'px'}).addClass("animate"); }, 3000) }); //animate end
  • Provide an example for clarity - Vitaly Cherny
  • Apply the deformation not on the button itself, but for example on: before or \ and: after. Transfer styles like background, border-radius, etc. on the pseudo-element, the button itself give z-index: 1; and the pseudo-element z-index: -1; then the button text will be on top of the pseudo-element and when adding / deleting a class, deform it and not the button. - U Fleming
  • Possible duplicate question: Text blur when animation is used - Sasha Omelchenko

0