Really simple delay loading of SVG animation...not working

user_4058909 0
Viewed 49

This seems like a simple problem compared to other SVG delay problems people are having.

I have replicated this text highlight effect.

I switched off the CSS hover for the effect so it is always showing.

My version is the pale pink Brilliant Business inside the top text block here: https://leslieh7.sg-host.com/join-us-alt/

I added transition-delay: 3000ms; to the SVG and this works on hover but not when the page loads - it is already loaded.

Is transition-delay the correct rule to use on the SVG?

svg-animate svg css
1 Answers

Did you really mean transition-delay? From your example, transition seems more likely.

As you already realised, the transition-xxx properties only apply to when you change the style of an element. If it's already that style when it is first rendered, there is no change.

If you want the highlight transition/animation to play after the page has loaded, then you probably want to use an animation rather than a transition.

Something like this:

<div class="selected">Join us</div>

.selected {
  animation: 3s ease-in forward pinkify;
}

@keyframes pinkify {
  to { fill: pink; }
}

Alternatively, you could add a handler to the Window load event. And in that handler add a class to that first element that has the same animation as the hover.

Something like this:

window.addEventListener("load", () => {
  document.getElementById("join-us").className.add("selected");
});

.selected {
  transition: 1s;
  fill: pink;
}
user_12928480
Related