/* SIBLING FADE: fade out siblings around a hovered item */

.tag-list { visibility: hidden; }
/* Prevents :hover from triggering in the gaps between items */

.tag-list > * { visibility: visible; }
/* Brings the child items back in, even though the parent is `hidden` */

.tag-list > * { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; }
/* Makes the fades smooth with a slight delay to prevent jumps as the mouse moves between items */

.tag-list:hover > * { opacity: 0.4; transform: scale(0.9); }
/* Fade out all items when the parent is hovered */

.tag-list > *:hover { opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms; }
/* Fade in the currently hovered item */

This isn’t my creation actually - I stumbled across the below Code Pen and fell in love with it

https://codepen.io/bytzmura/embed/XWjMPdx?default-tab=css%2Cresult&theme-id=dark

EDIT - replace

.tags a[href*="/tags/"] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    margin: 8px;
    width: 145px;
    background: var(--bs-body-navbar);
}

With

.tags:not([component="topic/tags"]) a[href*="/tags/"] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    margin: 8px;
    width: 145px;
    background: var(--bs-body-navbar);
}

Updating original post

just a small note

seems to that code break tags on topic header :

Same effect as on the V2 but I love it ^^

.tags:not([component="topic/tags"]) a[href*="/tags/"] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    margin: 8px;
    width: 145px;
    background: var(--bs-body-navbar);
}
/* SIBLING FADE: fade out siblings around a hovered item */

.tag-list { visibility: hidden; }
/* Prevents :hover from triggering in the gaps between items */

.tag-list > * { visibility: visible; }
/* Brings the child items back in, even though the parent is `hidden` */

.tag-list > * { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; }
/* Makes the fades smooth with a slight delay to prevent jumps as the mouse moves between items */

.tag-list:hover > * { opacity: 0.4; transform: scale(0.9); }
/* Fade out all items when the parent is hovered */

.tag-list > *:hover { opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms; }
/* Fade in the currently hovered item */

.tags a[href*="/tags/"] .tag-item {
    border-bottom: 4px solid var(--bs-border-color) !important;
}

On a side note, I have been just watching/listening Doc and Marty’s adventures in the background and then I see this

The exact CSS I have here is

@keyframes rotate180 {
        from {
          transform: rotate(0deg);
        }
       
        to {
          transform: rotate(180deg);
        }
      }
       
      @keyframes rotate0 {
        from {
          transform: rotate(180deg);
        }
       
        to {
          transform: rotate(0deg);
        }
      }
    .forum-logo:hover {
        transform: rotate(180deg);
    }
    .hover {
        transform: rotate(180deg);
    }

can you provide your CSS code and keyframe for I see it ?
On sudonix, the animation stop and restart when we leave the mouse over.

   animation-name: rotate180, rotate0;

You could remove rotate0 from this section and that will stop the animation as soon as the mouseLeave event is triggered in the DOM (in other words, as soon as you remove the hover)

   animation-name: rotate180;

no no my god, not constantly animation !!

If I hover over the logo, the animation triggers as currently, continues and ends even if I remove the mouse from the logo.

That’s what’s happening here on Sudonix.

as soon as I remove the mouse pointer from the logo, it returns to it’s original place and it cuts the animation.

Yes, that’s expected because you have the css set for hover state meaning once you remove that state, the animation will stop

You need to refactor the css to achieve the effect the looking for. Personally, I wouldn’t go for a constantly spinning logo. If you’re as old as I am, you’ll recall this being a thing in Internet Explorer 4 with the spinning globe on the right that was a constant presence and quite a distraction.

I also wouldn’t do this on any mobile devices as it can severely degrade the browser performance.

Example here of the problem

https://i.imgur.com/jI2vlrF.mp4

Strange with the code I put above, as soon as I remove the mouse pointer from the logo, it returns to it’s original place and it cuts the animation.

How can we let the animation end even if we remove the mouse pointer from the logo ?

animation-iteration-count: infinite;

Don’t do this on mobile devices though as performance will be greatly impacted.