Adding a fade-in to the exit button

I think I figured it out.

Like this?
Did I do it right?

Is that good, are there any adjustments you would make?

https://jsfiddle.net/e8qzbs7d/

.exit }
  /*animation: 8s fadeIn;
  animation-fill-mode: forwards;
  animation-delay: 8s;*/
  animation: fadeIn 8s forwards 8s;
  visibility: hidden;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

I’d remove the unused code.

2 Likes

I have it there to try to help me memorize what each is for.

1 Like

Yes I would do this.

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: transparent;
  fill: red;
  padding: 0;
  animation: fadeIn 8s forwards 8s;
  visibility: hidden;
  opacity:0;
}

@keyframes fadeIn {
  to {
   visibility: visible;
    opacity: 1;
  }
}

Note that although you have visibility in the 100% keyframe it actually gets triggered at 0%. There is no animatable state for visibility. It is either on or off so as the keyframe starts the element immediately becomes visible - which is what you want anyway otherwise you wouldn’t see it. Its the opacity that does the fade.

1 Like

Thank you.

Updated changes: https://jsfiddle.net/vj3feswm/

.exit{
  animation: fadeIn 8s forwards 8s;
  visibility: hidden;
  opacity: 0;
}

@keyframes fadeIn {
  to {
   visibility: visible;
    opacity: 1;
  }
}
2 Likes

Yes, it won’t effect the render, but I’d probably be inclined to remove the visibility property completely. Opacity seems doing all the work, so calling ‘visibility’ is just as likely to confuse someone (possibly you) looking at the code in future.

It’s not unusual to see people trying to animate between display:none --> display: block in a similar way. Although it’s easier to understand that there are no mid-points between 'none` and ‘block’ (i.e. none-ish…? slightly block?).

The visibility property seems more like something that should have degrees – like partially visible – but that’s precisely what opacity is for.

TBH I can’t think of an occasion I’ve use visibility in the last 20 years.

1 Like

Using visibility allows for the space to stay unclickable until the image appears.

1 Like

Adding to that, or, in addition to that,

How would I be able to have the exit button also fade out after it is clicked?

https://jsfiddle.net/3xym0f5s/

.exit {
  animation: fadeIn 8s forwards 8s;
  visibility: hidden;
  opacity: 0;
}
  keyframes fadeIn {
  to {
   visibility: visible;
    opacity: 1;
  }
}

Hi Alex,

In this case the visibility is required because there is a delay to the animation and for a full 8s you can click the empty space accidentally before you see the icon appear.

I usually use pointer-events :none or layer it below something else or indeed move it off screen. In this case visibility seems more efficient :slight_smile:

2 Likes

You could probably use the fadingOut class to trigger another animation similar to the way you closed the curtain in the other thread.

You would need to set the key frame to stay visible until 99% and then only at 100% make it hidden. Otherwise it will disappear straight away.

I’m on a mobile at the moment so can’t test it out but you have already done similar so see if you can work it out yourself. :slight_smile:

1 Like

I got part of it working.

Currently there is no fade when the exit button is clicked, it just disappears.

How would that be fixed? https://jsfiddle.net/unv3ko79/

https://jsitor.com/uHODdOEcZ

.exit {
  animation: fadeIn 8s forwards 8s;
  visibility: hidden;
  opacity: 0;
}

@keyframes fadeIn {
  to {
    visibility: visible;
    opacity: 1;
  }
}

.fadingOut .exit {
  animation: fadeOut 8s forwards;
  visibility: visible;
  opacity: 0;
}

@keyframes fadeOut {
  to {
    visibility: hidden;
    opacity: 0;
  }
}

I already told you how :slight_smile:

Also why did you set it to opacity:0 before the keyframe even started. There will be nothing to fade out!

Use this:


.fadingOut .exit {
  animation: fadeOut 8s forwards;
  visibility: visible;
  opacity: 1;
}

@keyframes fadeOut {
  99%{visibility:visible;}
  100% {
    visibility: hidden;
    opacity: 0;
  }
}
1 Like

There is an issue.

Clicking on the exit button before it fully fades in.

How would the be fixed or adjusted in the code?

What happens is:

When clicking on the exit button before it fully fades in is that it forces the svg to fade in fully, then it begins to fade out.

The svg/exit button instead should stop fading in, then from that spot, start fading out.

https://jsfiddle.net/8e13js47/

Is that something that can be adjusted or fixed in the code?

.exit {
  animation: fadeIn 8s forwards 8s;
  visibility: hidden;
  opacity: 0;
}

@keyframes fadeIn {
  to {
    visibility: visible;
    opacity: 1;
  }
}

.fadingOut .exit {
  animation: fadeOut 8s forwards;
  visibility: visible;
  opacity: 1;
}

@keyframes fadeOut {
  99% {
    visibility: visible;
  }

  100% {
    visibility: hidden;
    opacity: 0;
  }
}

Yes if you use pointer-events:none to start with that I showed in one of your other demos instead of visibility and then you can see it when it fades in.

When fading in you would have a default of pointer-events:none and then in the keyframe you repeat pointer-events:none at 99% and only at 100% would you set it to initial.

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: transparent;
  fill: red;
  padding: 0;
  /*animation: 8s fadeIn;
  animation-fill-mode: forwards;
  animation-delay: 8s;*/
  animation: fadeIn 8s forwards 8s;
 /* visibility: hidden;*/
  opacity: 0;
  pointer-events:none;
}

@keyframes fadeIn {
  99%{pointer-events:none;}
  100% {
    pointer-events:initial;
    opacity: 1;
  }
}

Then do the reverse for the fadeout.

1 Like

When you say do the reverse for the fadeout, what does that mean?

https://jsfiddle.net/zphjgdrb/

.exit { 
  animation: fadeIn 8s forwards 8s;
  /* visibility: hidden;*/
  opacity: 0;
  pointer-events: none;
}

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

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


.fadingOut .exit {
  animation: fadeOut 8s forwards;
  visibility: visible;
  opacity: 1;
}

@keyframes fadeOut {
  99% {
    visibility: visible;
  }

  100% {
    visibility: hidden;
    opacity: 0;
  }
}

basically this:

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

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
1 Like

I got it. thanks.
https://jsfiddle.net/7f0z6qau/


.exit {
  animation: fadeInExit 8s forwards 8s;
  /* visibility: hidden;*/
  opacity: 0;
  pointer-events: none;
}

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

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

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

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

I created a new exit button and pointer-events: initial; is creating white space around the svg.

When it is removed, there is no white space, then when it is added back in, white space appears.

In the code example I provided here you can see the white space by both the mouse cursor changing to pointer, and from the svg changing to green before the mouse touches the svg.

The exit button code by itself: https://jsfiddle.net/9xkesw3q/

Is there a solution to this? Would pointer-events: initial; be replaced with something else? or, maybe I don’t have it set up correctly, I am not sure.

.exit {
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  /*animation: 8s fadeIn;
  animation-fill-mode: forwards;
  animation-delay: 8s;*/
  animation: fadeInExit 0s forwards 0s;
  /* visibility: hidden;*/
  opacity: 0;
  pointer-events: none;
}

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

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

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

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

button.exit {
  pointer-events: none;
}

.exit:hover .exitHover {
  fill: green;
}

html

      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <g id="exit">
            <title>exit</title>
            <circle cx="0" cy="0" r="144" fill="transparent" pointer-events="visiblePainted" />
            <path class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)" fill="red" />
          </g>
        </svg>
      </button>

In addition to that, for some reason, it’s not working in the YouTube code.

The issue is that the space where the svg button is, it’s clickable before the svg fades in on the screen. I’m not really sure what the reason for that is.

https://jsfiddle.net/ofk8b5L9/2/

If it is clickable, that must mean, I’m missing a pointer-events: none; somewhere in the code?

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  /*animation: 8s fadeIn;
  animation-fill-mode: forwards;
  animation-delay: 8s;*/
  animation: fadeInExit 8s forwards 8s;
  /* visibility: hidden;*/
  opacity: 0;
  pointer-events: none;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }
  
  100% {
   /* pointer-events: initial;*/
    opacity: 1;
  }
}

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

@keyframes fadeOutExit {
  to {
    opacity: 0;
  }
}
button.exit {
  pointer-events: none;
}

Update: It’s because of this line I added to the code.

<circle cx="0" cy="0" r="144" fill="transparent" pointer-events="visiblePainted" />

But I have it in there for a reason, to remove the white space, which is the same method I used with the play buttons, and that worked fine.

That line is allowing the svg to be clicked on before it has faded in.

Would there be a way to delay or prevent:

<circle cx="0" cy="0" r="144" fill="transparent" pointer-events="visiblePainted" />

From being clicked on until after the svg has faded in?

Would I be able to add visibility: hidden; to it, or something that would make it stay unclickable?

To try to find a solution, I made this to test on. https://jsfiddle.net/5jzo8apL/

There are currently 2 issues:

1) pointer-events: initial; creates unnecessary white space.

2) This line needs to stay unclickable until after the svg has faded in.

<circle cx="0" cy="0" r="144" fill="transparent" pointer-events="visiblePainted" />

2 can be tested by putting the mouse cursor over the empty fade in space to see if there is a pointer, if there is one, that means the space is clickable.

.exit {
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  /*animation: 8s fadeIn;
  animation-fill-mode: forwards;
  animation-delay: 8s;*/
  animation: fadeInExit 12s forwards 0s;
  /* visibility: hidden;*/
  opacity: 0;
  pointer-events: none;
}

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

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

button.exit {
  pointer-events: none;
}

.exit:hover .exitHover {
  fill: green;
}

      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <g id="exit">
            <title>exit</title>
            <circle cx="0" cy="0" r="144" fill="transparent" pointer-events="visiblePainted" />
            <path class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)" fill="red" />
          </g>
        </svg>
      </button>

Adding visibility: hidden; works to keep visiblePainted unclickable, but then the svg does not fade out, it just disappears.

I almost got it there. https://jsfiddle.net/7p3mcn8v/

.exit {
  animation: fadeInExit 8s forwards 8s;
  /* visibility: hidden;*/
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

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

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

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

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

And: visibility: visible; is not able to be used in here:

Which is where the post #13 issue comes up again.

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

Update: This works: https://jsfiddle.net/mbxkenq9/

.exit {
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  animation: fadeInExit 2s forwards 0s;
  opacity: 0;
  pointer-events: none;
}

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

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}
.exitHover {
  pointer-events: none;
}
.exitCircle{
  cursor: pointer;
}

.exitCircle:hover + .exitHover {
  fill: green;
}
<button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <g id="exit">
            <title>exit</title>
            
            <circle class="exitCircle" cx="0" cy="0" r="144" fill="transparent" />
            <path class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)" fill="red" />
          </g>
        </svg>
      </button>

But, I am having difficulty adding it to the YouTube code.

My attempt: https://jsfiddle.net/po93j1nk/

I wasn’t able to get the hover working, that and, clicking off the circle closes it.

I am finding that,

That does not work as the cursor: pointer; needs to be on the .exit class.

I’m back to square 1. https://jsfiddle.net/g9de2rnu/

Using Dev Tools: The Green https://jsfiddle.net/t34adqxo/

Top left, right, bottom left, bottom right off the svg is clickable white space.

Update:

Adding: clip-path: circle(50%); fixes the white space issue.

I’m down to 1 issue:

The hover works stand alone, by itself:

Seen Here: https://jsfiddle.net/02ke4r5v

.exit:hover .exitHover {
  fill: green;
}

When I place it in my code it does not work.

Seen Here: https://jsfiddle.net/hnba7z0d/

How would I get hover to work on the exit Button?

Update: Hover now works.

https://jsfiddle.net/2tkvf1ur/

.exit svg {
  fill: red;
}

.exit:hover svg {
  fill: green;
}

Removed fill from here:

<button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <g id="exit">
            <title>exit</title>
            <path class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)"/>
          </g>
        </svg>
      </button>