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><h1class="text first">Wait 2 seconds...</h1><h1class="text second">Now <ahref="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.