Should pointer-events: initial; be used on the spinner?

pointer-events: initial; is being used here:

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 2s ease-in;
}

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

  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
   }
}

Should it be used here also?

.play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
  animation: rotate 700ms linear forwards;
  animation-iteration-count: 2;
  border-color: red transparent red transparent;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: #0059dd;
  }
}

Where I would add it here.

100% {
    transform: rotate(360deg);
    border-color: #0059dd;
  }
}

The default value for pointer-events is initial and as the last value (100%) in the keyframe is not specified then the pointer-events:none at 99.9% will return to initial at 100% assuming that you have not set it somewhere else.

Note that as you start the keyframe the pointer-events none at 99% then it is likely that your spinner can be clicked for most of that keyframe. I would start the none at zero and repeat at 99.9% and then at 100% set the initial value to avoid confusion.

For the sake of clarity I would do this.

@keyframes rotate {
  0% {
    transform: rotate(0deg);
      pointer-events: none;
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: #0059dd;
   pointer-events:initial;
  }
}

Sometimes more verbose styles are better for clarity and understanding,

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.