I am working on an animation that needs to run behind a link. Here is an example: https://codepen.io/ehbehr/pen/KKNbOvN and below is the HTML and CSS:
*, *:before, *:after {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
height: 100vh;
}
.container > div {
display: flex;
justify-content: center;
align-items: center;
}
.wrap {
position: relative;
width: 100%;
height: 100vh;
}
.linky-thing {
width: auto;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.thankyou {
color: magenta;
text-decoration: none;
white-space: nowrap;
font-size: 2em;
font-family: arial;
}
.pulser {
position: absolute;
display: block;
width: inherit;
padding-top: 20px;
height: 2em;
z-index: -1;
}
.pulser p {
position: absolute;
margin: 0;
padding: 0;
height: 20px;
width: 20px;
border-radius: 50%;
z-index: -1;
}
.pulser p:before {
content: '';
position: absolute;
height: 15px;
width: 15px;
top: 0%;
left: 0%;
bottom: 0%;
right: 0%;
border-radius: 50%;
border: 2px solid #2cfa1f;
background-size: 100%;
border-radius: 50%;
opacity: 0;
/*}
.pulser p:hover:before {*/
animation-name: pulse;
animation-duration: 1.5s;
animation-delay: calc(var(--animation-order)/.33 * 100ms);
animation-fill-mode: both;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes pulse {
0% {
transform: scale(0);
}
33% {
opacity: 1;
}
100% {
transform: scale(2.7);
opacity: 0;
}
}<div class="container">
<div class="wrap">
<div class="linky-thing"><a class="thankyou" href="https://wikipedia.org">lorum ipsum dolor sit amet colotum ecvo</a>
<div class="pulser">
<p style="--animation-order: 3;" />
<p style="--animation-order: 2;" />
<p style="--animation-order: 1;" />
</div>
</div>
</div>
</div>There are some challenges I have encountered:
When using the :before pseudo-element, I can make it animate but only when I position it in front of the text and not anywhere on the link behind it. I want the animation to be triggered no matter where the cursor is placed on the text. Additionally, I want it to animate behind the text link. Placing it under the link does not trigger the animation on hover.
The animation, borrowed from https://codepen.io/dbenmore/pen/zVxrpB, works as expected when running 3 staggered instances, however, it only works in the :before state and not in the :hover:before state where it only runs once. How can I make it iterate all three times in the :hover:before state? (Using a blurry png as a workaround is not ideal).
For added interactivity, I would like the animation to originate from wherever the cursor lands on the text link. This might require some JavaScript implementation, as I have multiple links on the page where this animation should apply. The page is a "thank you" page listing sites that helped me build my website.
Thank you in advance.