Fade out animation goes to balck and then faded out-CodePudding

My WebPage background is BLUE and I want to create a simple RED blinking circle; But when animation runs, first it turns black and then hides

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 ></span>

CodePudding user response：

not sure if this is what you're looking for but, I've added black as a background colour with opacity on in the keyframes then it goes to red. Let me know if its what you wanted.

 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{
      background-color: black;
        opacity: 0.7;
    }

    to {
      background-color: red;
        opacity: 1;
    }
}

<span ></span>

CodePudding user response：

Are you trying to create something close to a pulsing effect? I'm not seeing where it goes to black in your code.

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 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<body>
  <div >
  </div>
</body>