I have a BLUE background on my webpage and I am trying to add a simple RED blinking circle. However, when the animation runs, it first turns black and then disappears.
body {
background: blue;
}
.blinker {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
border-radius: 50%;
top: 5px;
right: 10px;
animation: blink 1s ease infinite;
}
@keyframes blink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<span class="blinker"></span>