SVG 图像 CSS3 动画

Posted 2023-03-06

【中文标题】SVG 图像 CSS3 动画

【英文标题】：SVG image CSS3 animation

【发布时间】：2016-01-12 17:48:51

【问题描述】：

我需要让我的气泡聊天的第一个点在无限 CSS3 动画中可见和不可见。

为什么我的代码不起作用？

@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"   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>

【问题讨论】：

为什么不能有更多这样的问题。具体的小问题。

【参考方案1】：

display 属性不可设置动画 (see MDN)。不过，您可以为opacity 设置动画。

例子：

@keyframes onoff 
  0%, 100%  opacity: 0; 
  50%       opacity: 1; 

#circle1 
  animation: onoff 2s infinite;

<svg xmlns="http://www.w3.org/2000/svg"   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>