CSS Animation to Play Only Once Per Session

Store Design
, , ,

Topic summary

A user implemented CSS animation for submenu links that only triggers once and requires a page refresh to work again. They’re seeking help to make the animation repeat on subsequent interactions.

Technical Implementation:

  • Uses jQuery to add/remove a visible-is class on mouseover/mouseout events
  • Applies staggered transition delays (incrementing by 80ms) to each submenu link
  • CSS transitions control opacity and transform properties

Suggested Solutions:

  • One responder recommends using CSS animation with animation-iteration-count: infinite instead of transitions
  • Another requests clarification on whether CSS or JavaScript is being used and asks for complete code to investigate the issue further

Current Status:
The discussion remains open with the original poster sharing their code (jQuery + CSS transitions). The animation appears to be transition-based rather than keyframe-based, which may explain why it doesn’t repeat without a page refresh. Awaiting further troubleshooting or implementation of the suggested animation approach.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hello, I added animation to my sub links, but it only works once, it doesn’t work the second time or it doesn’t repeat. I need to refresh the page to see it working again. why?

my website: lefevreandco.com

pass:maonge

2

@lefevreandco

I guess you used transition instead of creating an animation in CSS and make it infinite so that you get what you need refer to the helper animation below.

Helper Animation

thanks

3

Hi @lefevreandco ,

Did you use CSS animation or JS? Can you show the code you have used for that so that I can investigate more on the issue and help you fix it.

Thanks,

Sandesh

4
@media(min-width: 990px){ .header__submenu li a { opacity: 0; display: block!important; transform: translateY(-5px); transition: transform .15s cubic-bezier(.215, .61, .355, 1), opacity .35s cubic-bezier(.215, .61, .355, 1); } .visible-is details > .header__submenu li a{ opacity: 1; transform: translateY(0); } .js details > .header__submenu { opacity: 0; transition: opacity .1s ease-out; visibility: hidden; transform: none!important; animation: fadeIn!important; } .visible-is details > .header__submenu { opacity: 1!important; transition: opacity .2s ease-out!important; visibility: visible!important; } }

this is my code