fading in /tags page

[crazycells]

hi @phenomlab ,

I loved how all tags except the selected one fade in /tags page…

https://sudonix.com/tags

can you please share the secret?

[phenomlab]

@crazycells @DownPW here you go…

/* 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

[DownPW]

ohh yeah good question lol

[phenomlab]

@crazycells @DownPW here you go…

/* 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

[DownPW]

Thanks codepen is a very useful site !

the spinning logo is codepen two ?

[phenomlab]

@DownPW said in fading in /tags page:

the spinning logo is codepen two ?

No, that’s my own CSS.

[DownPW]

oo yeah can you provide it because I use this but doesn’t working:

.header .forum-logo, img.forum-logo.head {
    max-height: 50px;
    width: auto;
    height: 30px;
    margin-top: 9px;
    max-width: 150px;
    min-width: 32px;
    display: inline-block;
    animation-name: rotate180, rotate0;
    animation-duration: 1000ms;
    animation-delay: 0s, 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    transition: transform 1000ms ease-in-out;
}

[phenomlab]

@DownPW You’re probably missing this

    @keyframes rotate180 {
        from {
          transform: rotate(0deg);
        }
       
        to {
          transform: rotate(180deg);
        }
      }
       
      @keyframes rotate0 {
        from {
          transform: rotate(180deg);
        }
       
        to {
          transform: rotate(0deg);
        }
      }

Without the keyframes it will not work

[DownPW]

@DownPW said in fading in /tags page:

.header .forum-logo, img.forum-logo.head {
max-height: 50px;
width: auto;
height: 30px;
margin-top: 9px;
max-width: 150px;
min-width: 32px;
display: inline-block;
animation-name: rotate180, rotate0;
animation-duration: 1000ms;
animation-delay: 0s, 1000ms;
animation-iteration-count: 1;
animation-timing-function: linear;
transition: transform 1000ms ease-in-out;
}

like this ? Because I have the effect but just at the refresh page and not on Mouse over

.header .forum-logo, img.forum-logo.head:hover {
    max-height: 50px;
    width: auto;
    height: 30px;
    margin-top: 9px;
    max-width: 150px;
    min-width: 32px;
    display: inline-block;
    animation-name: rotate180, rotate0;
    animation-duration: 1000ms;
    animation-delay: 0s, 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    transition: transform 1000ms ease-in-out;
    
    @keyframes rotate180 {
        from {
          transform: rotate(0deg);
        }
       
        to {
          transform: rotate(180deg);
        }
      }
       
      @keyframes rotate0 {
        from {
          transform: rotate(180deg);
        }
       
        to {
          transform: rotate(0deg);
        }
      }
      
}

EDIT:

I have it !!!

@keyframes rotate180 {
        from {
          transform: rotate(0deg);
        }
       
        to {
          transform: rotate(180deg);
        }
      }
       
      @keyframes rotate0 {
        from {
          transform: rotate(180deg);
        }
       
        to {
          transform: rotate(0deg);
        }
      }
      
.header .forum-logo:hover {
    display: inline-block;
    animation-name: rotate180, rotate0;
    animation-duration: 1000ms;
    animation-delay: 0s, 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    transition: transform 1000ms ease-in-out;
    
   
      
}

[phenomlab]

@DownPW Yes, that was going to be my solution.

[crazycells]

@phenomlab thanks for sharing, that looks very cool

[crazycells]

@DownPW thanks for the codes, how should we edit it if we want a full turn? and keep turning as long as the mouse is hovered on?

[phenomlab]

@crazycells change 180 to 360 on the keyframes and set to time to infinite on the animation, so an example would be

animation-iteration-count: infinite;

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

[crazycells]

@phenomlab thanks

[DownPW]

hmmm

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 ?

[DownPW]

@phenomlab

Example here of the problem

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

[phenomlab]

@DownPW said in fading in /tags page:

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.

[DownPW]

@phenomlab

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.

[phenomlab]

@DownPW I see what you mean. The reason for this is that you are calling both rotate180 and rotate0 which are two separate effects.

   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;

[DownPW]

hmm not work

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.

[phenomlab]

@DownPW it’s here
https://sudonix.com/post/3590

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);
    }