Adding a fade-in to the exit button

How would I Fade out the exit svg on the hovered color?

It goes from red, hovers to green.

Then, how would I have it fade out on green?

https://jsfiddle.net/9ejofLs1/

.exit:hover svg {
  fill: green;
}

.fadingOut .exit {
  animation: fadeOutExit 8s forwards;
  pointer-events: none;
  opacity: 1;

}

@keyframes fadeOutExit {
  to {
    opacity: 0;    
  }
}

Like this:

.exit:hover svg,
.fadingOut .exit svg  {
  fill: green;
}
1 Like

Here I added an animation for hover fade in.

I think I did this right.

.exit:hover svg,
.fadingOut .exit svg  {
  fill: green;
  animation: exitHoverFadeIn 3s ease forwards;
}

@keyframes exitHoverFadeIn {
  from {
    fill: red;
  }
}

How do I add an animation for hover fade out? https://jsfiddle.net/gwtmhL58/

I was thinking it would be written this way.

Then where would the animation line be placed?

I am stuck on this.

animation: exitHoverFadeOut 3s ease forwards;

@keyframes exitHoverFadeOut {
  to {
    fill: red;
  }
}

You don’t need an animation for a simple color hover change.

.exit svg {
  fill: red;
  transition: fill 1s ease;
}
.exit:hover svg  {
  fill: green;
}

That will transition in and out.

1 Like

That was going to be my next question because I was reading about it and that transition should be used with hover, but I was not able to figure it out.

https://jsfiddle.net/2t1bzg43/

.exit svg {
  fill: red;
  transition: fill 3s ease;
}

.exit:hover svg,
.fadingOut .exit svg  {
  fill: green;
}

The transition is applied to the normal state of the element and then when the property you are transitioning is changed in some way (e.g. via hover) then it will transition to that new value assuming it is a property that can be transitioned.

1 Like

On the exit button, after the exit button is clicked, the cursor changes to default.

I think pointer-events: none; was used to do that.

  pointer-events: none;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

How do I add that with .thePlay ? https://jsfiddle.net/6m9owcL8/1/

.thePlay {
}

If that is not how it was done,

How was that done, and how do I do that with .thePlay svg button?

How would I add pointer-events: none; to the svg play buttons after they are clicked?

That is how it works with the exit button, the cursor changes to default after it is clicked.

Which is caused by this I think: pointer-events: none;

If I am understanding what the issue is, I might not be.

I know that, after clicking on the exit button , the cursor changes from pointer to default , and stays on default after it is clicked.

I’m trying to do the same thing with the svg play button.

In the fiddle you can see that after the svg play button is clicked, the cursor does not stay as default, it changes back to pointer.

Which allows for a 2nd button to be clicked before the buttons fade out completely.

You can use the initial-fade class that is being added to the body.

.initial-fade .thePlay{pointer-events:none;cursor:default;}

I’m not sure the pointer-events is needed as you have already clicked it and its already on its way but should do no harm to leave it in. I don’t think clicking the play again and again will do anything different.

Click on 1st button: video starts.
Click on 2nd button: video starts
Click on 3rd button: video starts.

All 3 videos start before the svg buttons completely fades out.

Seen Here: https://jsitor.com/AKLpd4w9-

I should only be able to click on 1 button, not 2.

cursor: default; should change on its own.
Also, that was never added to the exit button.

The exit and play are both buttons.

After the exit is clicked: cursor changes to default on its own, and stays as default.

After the play button is clicked: the cursor changes to default, then back to pointer.

pointer-events: none; is not doing anything in the code.

.initial-fade .thePlay {
  pointer-events: none;
}

On the exit button:

pointer-events: none; was placed here:

.exit svg {
  fill: red;
  transition: fill 3s ease;
}

.exit:hover svg,
.fadingOut .exit svg {
  fill: green;
}

.fadingOut .exit {
  animation: fadeOutExit 8s forwards;
  pointer-events: none;
  opacity: 1;

}

@keyframes fadeOutExit {
  to {
    opacity: 0;
  }
}

The play button has an html attribute on the inner circle element that explicitly sets pointer events The exit button does not have this.

The only way to over-ride attributes is by using !important.

You need to do this:

.initial-fade .thePlay ,
.initial-fade .thePlay *{
pointer-events: none!important;
}
1 Like

I spotted an issue:

The animation that was added to here:

body {
  background: #353198;
  /*animation: fadeInButtons 2s ease 0s forwards;*/
}

@keyframes fadeInButtons {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

It interferes with the mouse pointer when the play svg is clicked.

body.initial-fade {
  animation: initial-fade 3s ease forwards;
}

@keyframes initial-fade {
  to {
    opacity: 0;
  }
}

.initial-fade .thePlay ,
.initial-fade .thePlay *{
pointer-events: none!important;
}

When this is enabled in the code: https://jsfiddle.net/fecxkqhb/
animation: fadeInButtons 2s ease 0s forwards;

After clicking on the play svg, the mouse cursor stays as pointer, it kind of stutters until the mouse is moved, then changes to default.

When this line is disabled in the code: https://jsfiddle.net/xua432Lb/
/*animation: fadeInButtons 2s ease 0s forwards;*/

The mouse cursor changes to default right away and stays as default.

How would that issue be fixed in the code?

Is the fade-in of the buttons still able to work in the code, or would it need to be removed?

I can’t replicate that unless you are clicking in the first 2 seconds of page load while the button fades in for the first time. I’m not quick enough to make that happen so I see no issue.

If that is your issue then you can add a fade on to the circle on the play button and set its pointer events to none while the whole thing fades in.

body {
  background: #353198;
  animation: fadeInButtons 2s ease 0s forwards;
}

@keyframes fadeInButtons {
  0% {
    opacity: 0;
    pointer-events: none;
  }

  99,9% {
    pointer-events: none;
  }

  100% {
    opacity: 1;
    pointer-events: initial;
  }
}
.thePlay circle {
  animation: fadeInButtons 2s ease 0s forwards;
  pointer-events: none;
}

Any other deviation from the norm is probably a bug or browser implementation.

You are making all these fade ins which I find very annoying if I were a user as I want to quickly click the buttons whether they are faded or not. Many users will click the button once or twice and then when nothing happens will think its broken. I’m not sure they will wait for 6 seconds and then click it again.

1 Like

I found adding this works. https://jsfiddle.net/u163ysbc/

.initial-fade {
  cursor: default;
}

You never added @keyframes to this:

.thePlay circle {
  animation: fadeInButtons 2s ease 0s forwards;
  pointer-events: none;
}

Also, that is using an identical animation name.

body {
  background: #353198;
  animation: fadeInButtons 2s ease 0s forwards;
}

It uses the same fadeInButtons keyframes that the body uses.

I asked because it didn’t do anything in the code for me.

But doing this worked:
It fixed the issue.

.initial-fade {
  cursor: default;
}

You seem to be talking about something different from me. Your code doesn’t stop the playbutton from being clicked while the page is loading and the buttons are fading in whereas the code I gave you stops this.

Just change the delay in the body to a bit longer and you will see you can click while its almost invisible which is what I thought you were talking about.

body {
  background: #353198;
  animation: fadeInButtons 6s ease 0s forwards;
}

The class initial-fade isn’t added until you click the playbutton so has nothing to do with when the page first loads and fades in.

That must be a different issue you are talking about and not one I have looked at. I do notice that jsfiddle (and codepen) are sometimes a bit unreliable in their handling as everything is done inside an iframe.

If cursor:default solves it for you then leave it in but I don’t know how it can affect anything because that’s its default state unless I missed something?

Unless this is an issue after you have returned back to the page from the video of course as I have not checked for that either?

Back tomorrow.

2 Likes

I had to redo this post because I messed up the fiddle code links.

Instead of doing this:

body {
  background: #353198;
  animation: fadeInButtons 2s ease 0s forwards;
}

.initial-fade {
  cursor: default;
}

I found this works:

body {
  background: #353198;
 }

body .outer  {
 animation: fadeInButtons 2s ease forwards;
}

or this:

body .thePlay {
 animation: fadeInButtons 2s ease forwards;
}

Where then this is not needed:

.initial-fade {
  cursor: default;
}

My question is:

When a class is on body, clicking on the svgs too soon on here causes the svg to fade out before fading in completely.

https://jsfiddle.net/r6bt0q15/

body .outer  {
 animation: fadeInButtons 20s ease forwards;
}

When the animation is placed on the body without a class, clicking on the svg too soon causes the svgs to fade in all the way, then fade out.

https://jsfiddle.net/k3u26j1v/

Why is that?

body {
  background: #353198;
  animation: fadeInButtons 20s ease forwards;
 }

Update: I stand corrected.

If .outer is used:

body .outer  {
 animation: fadeInButtons 2s ease forwards;
}

This would be needed:

.fadingOut {
  cursor: default;
}

But not if .thePlay is used there instead.

I think the reason for that is, .outer might occupy the space where the exit button is located.

When .outer is used, the Exit button stays on pointer when it is clicked, changes to default only when the mouse moves.

cursor: default; would be used so that the cursor changes to default right away.

Seen Here: https://jsfiddle.net/0t5srnq4/1/

You know why that is.!

The body has an animation that is fading in and in that demo there is a 20second animation for it. When you click the svg (which you will be able to because you didn’t add the code I gave to stop it) there is a new class added to the body which changes the animation to the initial-fade animation. The old original animation no longer exists because the animation name has been changed with the new class as they address the same element (the body).

If you don’t want the svg to be clicked while the page is loading you need to sop that happening and I have given you code for that but you said it had no effect.

That is now an animation on a different element. You are no longer animating the body. You won;t get any fade effect on the body’s blue background. What you should really be doing anyway is setting it to transparent and then allow it to change color while fading in.

e.g.

body {
background: #353198;
animation: fadeInButtons 20s ease forwards;
}

@keyframes fadeInButtons {
  0% {
    opacity: 0;
    background:white; /* or transparent but will look like black to start with*/
    }

  100% {
    opacity: 1;
      background: #353198;

  }
}

It seems an event occurs when the pointer moves but not while it is not moving. As soon as you move the mouse it detects the pointer events:none and the cursor goes back to default. It seems as though you still can’t click the element but the cursor is only detected when the element is moved.

Therefore you probably need to set the state of the cursor at the same time that you change pointer events so that it displays as you want without the mouse moving. Which I believe I already did in one of the sets of code I gave you and then you said "how come its not needed here" and started another 100 posts.

I believe the testing has been inconsistent in that its almost impossible for me to click the mouse without moving it.

1 Like

I don’t believe pointer-events: none; is doing anything in the code here.

Can you tell me what it is doing?

I am not noticing anything: https://jsfiddle.net/hqat3bj9/

body {
  background: #353198;
  animation: fadeInButtons 5s ease 0s forwards; 
}

@keyframes fadeInButtons {
  0% {
    opacity: 0;
    pointer-events: none;
  }

  99% {
    pointer-events: none;
  }

  100% {
    opacity: 1;
    pointer-events: initial;
  }
}

.thePlay circle{
  animation: fadeInButtons 0s ease 0s forwards;
  pointer-events: none;
}

body.initial-fade {
  animation: initial-fade 2s ease forwards;
}

@keyframes initial-fade {
  to {
    opacity: 0;
  }
}