A Link That Receives Pointer-events After Animating Isn't Clickable In Safari

I'm animating text with CSS where elements appear one after the other. Try it out first to see what I mean: As you can see in the snippet, the second element has a link. By defaul

Solution 1:

Here's the solution I went for that also works on Safari:

.text {
  position: absolute;
}

/* The first element starts off visible and fades out after 2s */
.first {
  opacity: 1;
  visibility: visible;
  animation: fade 500ms reverse forwards 2000ms;
}

/* The second element starts off hidden and fades in after 3s */
.second {
  opacity: 0;
  visibility: hidden;
  animation: fade 500ms forwards 3000ms;
}

@keyframes fade {
  from {
    opacity: 0; /* We still need opacity to animate on */
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

<div>
  <h1 class="text first">Wait 2 seconds...</h1>
  <h1 class="text second">Now <a href="https://example.com">click</a></h1>
<div>

Instead of disabling pointer-events, we can use visibility: hidden; to ensure that the link isn't clickable before it should be.