Question

我最近用CSS＆＃34; @keyframes ＆＃34; ...

制作了一个简单但很酷的动画横幅

...但是因为那个动画显然需要很大的力量，它给了我一个非常不稳定/缓慢的网络浏览器（Chrome）以及将我的Macbook Pro变成一个昂贵的吹风机，有没有办法渲染一个这种动画转变为电影吗？

当然，我可以使用我的视频节目拍摄实时截图，但后来我仍然感到不稳定，这是不可取的。或者有没有其他方法来实现平滑/消除迟缓，以便我可以录制我的屏幕？

OBSERVE：

我没有使用HTML5＆＃34;画布＆＃34;像stackoverflow一样的其他人正在使用。
动画的速度正是我想要的。动画的速度足够快，可以顺利运行，但也足够慢，有时会出现不稳定的行为（证明速度不应该受到责备）。
GIF是不可能的！这工作在90年代......不再了！我在动画图片中有太多颜色。

HTML代码的一部分：

<div class="a">
  <div class="container">
    <img class="imgA1" src="galaxy.jpg">
    <img class="imgB1" src="logo.png">
  </div>
</div>

CSS代码的一部分：

.imgA1{
  animation-duration: 100s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}
.imgA1{
  animation-name: containerA;
}
@keyframes containerA {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:0px; top:-483px;}
  26%  {background-color:blue; left:0px; top:-483px;}
  50%  {background-color:green; left:0px; top:0px;}
  51%  {background-color:red; left:0px; top:0px;}
  75%  {background-color:blue; left:0px; top:-483px;}
  76%  {background-color:green; left:0px; top:-483px;}
  99%  {background-color:red; left:0px; top:0px;}
  100% {background-color:red; left:0px; top:0px;}
}

和平人民！

我可以将css关键帧动画转换为video / movie / mpg吗？

0 个答案: