Home / Questions / 155698
Accepted
Jheyman Mejia
Asked: 2020-04-14 13:47:30 +0800 CST 2020-04-14 13:47:30 +0800 CST

Linear Gradient hover animation repeats

  • 772

I am creating a shine or glow type effect on a text, the animation is activated when hovering with the cursor over the text and deactivated when removing it.

The animation is a gradient color and transparency mask that runs from left to right once, giving it that glow effect. So far so good, the problem arises that after this effect, the same effect is loaded once more but slower (leaving the cursor on top of course) and it only reaches half of the text. I want to remove that second incomplete effect.

I already tried removing the infinite so that loops were not created but it still persists. The duration of the effect is minimum .5s

I think the problem is in the linear gradient , but I don't know much about its use and every time I modify it the effect is damaged.

I leave you the code in case you see something that doesn't add up,

PS: I increased the duration of the effect to 5s so that you notice it more clearly.

Thank you very much!

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400);

body {
  background-color:#000;
}

.wrapper {
  display: block;
  position: absolute;
  top: 50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
}

h1 a {
  color: #fff;
  font-size: 2em;
  text-decoration: none;
  display: inline-block;
  position: relative;
  font-family: 'Roboto', sans-serif;
}

      .effect-shine:hover  {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.1) 40%, #000 50%, rgba(0,0,0,.9) 70%); /*define la transparencia*/
  -webkit-mask-size: 200%;
  animation: shine 5s ; /*define la velocidad en segundos*/
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }

  to {
    -webkit-mask-position: -50%;
  }
}
<div class="wrapper">

  <h1 align="center"><a class="effect-shine">EFECTO SHINE</a></h1>
</div>

html

1 Answers

  1. Best Answer

    I changed the values ​​of the -webkit-mask-position:

    -webkit-mask-position: 150%;
-webkit-mask-position: -50%;

    a

    -webkit-mask-position: 200%;
-webkit-mask-position: 0%;

    and they seem to work fine now:

    @import url(https://fonts.googleapis.com/css?family=Roboto:300,400);

body {
  background-color:#000;
}

.wrapper {
  display: block;
  position: absolute;
  top: 50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
}

h1 a {
  color: #fff;
  font-size: 2em;
  text-decoration: none;
  display: inline-block;
  position: relative;
  font-family: 'Roboto', sans-serif;
}

.effect-shine:hover  {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.1) 40%, #000 50%, rgba(0,0,0,.9) 70%); /*define la transparencia*/
  -webkit-mask-size: 200%;
  animation: shine 5s ; /*define la velocidad en segundos*/
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 200%;
  }

  to {
    -webkit-mask-position: 0%;
  }
}
    <div class="wrapper">

  <h1 align="center"><a class="effect-shine">EFECTO SHINE</a></h1>
</div>

    • 2