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;
}
}