SVG CSS关键帧动画帮助：在3个屏幕之间无限淡出答案

【问题标题】：SVG CSS keyframe animation help: Fade between 3 screens infinitelySVG CSS关键帧动画帮助：在3个屏幕之间无限淡出
【发布时间】：2021-02-27 06:55:59
【问题描述】：

我想在 SVG 中制作一个简单的 CSS 关键帧动画，一个无限重复的 15 秒幻灯片式演示，三个屏幕（我们称它们为#red、#yellow、#blue），每个屏幕显示 5 秒每个之间大约有 1 秒的淡入淡出。我不能完全弄清楚使用关键帧和不透明度的技术/时间，而且我在参考网站或博客文章中找不到这么简单的东西。感谢您的所有帮助！

想通了：

  #red{
  animation: red-animate 20s ease infinite;
  }
  #yellow{
  animation: yellow-animate 20s ease infinite;
  }
  #blue{
  animation: blue-animate 20s ease infinite;
  }
  @keyframes red-animate {
  0%    {opacity: 1;}
  28%   {opacity: 1;}
  33%   {opacity: 0;}
  94%   {opacity: 0;}
  100%  {opacity: 1;}
  }
  @keyframes yellow-animate {
  0%    {opacity: 0;}
  28%   {opacity: 0;}
  33%   {opacity: 1;}
  61%   {opacity: 1;} 
  66%   {opacity: 0;} 
  100%  {opacity: 0}
  }
  @keyframes blue-animate {
  0%    {opacity: 0;}
  61%   {opacity: 0;}
  66%   {opacity: 1;}
  94%   {opacity: 1;}
  100%  {opacity: 0}
  }

【问题讨论】：

为什么不试试 SMIL。您可能会发现链接动画更容易。
joningram.co.uk/article/svg-smil-frame-animation 是一个简单的 SMIL 启动器

标签： svg css-animations

【解决方案1】：

我会保持简单，并在单个关键帧动画中完成所有操作。如果我使用像 Angular 这样带有状态动画的框架，我可以按顺序制作三个动画，但是，在纯 CSS 中我只会使用一个（尤其是为单个 SVG 制作动画，因为它是你需要的）。

一个简单的例子，在这些步骤之间没有不透明度和动画fill 颜色（将其延长为 5 秒而不是 60 秒以避免浪费人们的时间）：

.rect {
fill: red;
animation: animate-color-and-opacity 5s ease infinite;
}  
  
  @keyframes animate-color-and-opacity {
  0%    {fill: red;}
  33%   {fill: blue;}
  66%   {fill: green;}
  }

<svg width="400" height="110">
  <rect class="rect" width="300" height="100" />
</svg>

如果您需要中间的淡入淡出效果（这次是 15 秒长的动画）：

.rect {
fill: red;
animation: animate-color-and-opacity 15s ease infinite;
}  
  
  @keyframes animate-color-and-opacity {
  0%    {fill: red; opacity: 1}
  
  19%   {opacity: 1}
  29%   {opacity: 0}
  33%   {fill: blue; opacity: 1}
  
  
  52%   {opacity: 1}
  62%   {opacity: 0}
  66%   {fill: green; opacity: 1}
  
  86%   {opacity: 1}
  96%   {opacity: 0}
  }

<svg width="400" height="110">
  <rect class="rect" width="300" height="100" />
</svg>

如果您不想在两者之间进行填充过渡，可以使用step-end：

.rect {
fill: red;
animation: animate-color-and-opacity 10s infinite step-end;
// or animation-timing-function: step-end; 
}  
  
  @keyframes animate-color-and-opacity {
  0%    {fill: red; opacity: 1}
  
  19%   {opacity: 1}
  29%   {opacity: 0}
  33%   {fill: blue; opacity: 1}
  
  
  52%   {opacity: 1}
  62%   {opacity: 0}
  66%   {fill: green; opacity: 1}
  
  86%   {opacity: 1}
  96%   {opacity: 0}
  }

<svg width="400" height="110">
  <rect class="rect" width="300" height="100" />
</svg>

【讨论】：