CSS3 Animated SVG Image

Question

I need to make the first point of my chat with the bubble visible and invisible in an endless CSS3 animation.

Why is my code not working?

@keyframes onoff {
  0% { display: none; }
  25% { display: block; }
  50% { display: none; }
  100% { display: block; }
}
#circle1 {
  animation: onoff 5s infinite;
}

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 24 24">
  <g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none">
    <path d="M.5 16.5c0 .553.447 1 1 1h2v4l4-4h15c.552 0 1-.447 1-1v-13c0-.553-.448-1-1-1h-21c-.553 0-1 .447-1 1v13z" />


    <!--Annimation on this cicle-->

    <circle id="circle1" cx="8.5" cy="10" r=".5" />

    <!-- -->

    <circle id="circle2" cx="16.5" cy="10" r=".5" />
    <circle id="circle3 " cx="12.5" cy="10" r=".5" />
  </g>
</svg>

Run codeHide result

Answer 1

The property is displaynot animated ( see MDN ). You can animate opacity .

Example:

@keyframes onoff {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
#circle1 {
  animation: onoff 2s infinite;
}

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 24 24">
  <g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none">
    <path d="M.5 16.5c0 .553.447 1 1 1h2v4l4-4h15c.552 0 1-.447 1-1v-13c0-.553-.448-1-1-1h-21c-.553 0-1 .447-1 1v13z" />
    <circle id="circle1" cx="8.5" cy="10" r=".5" />
    <circle id="circle2" cx="16.5" cy="10" r=".5" />
    <circle id="circle3 " cx="12.5" cy="10" r=".5" />
  </g>
</svg>

Run codeHide result