有没有办法减慢gif作为html和CSS的背景？

Question

我正在为学校建立一个网站。作为第一页的背景，我选择了一个gif。但是gif太快了。是否有一些属性或方法来减慢gif。也许我可以输入一些东西来减慢它的速度？

Answer 1

你需要重新取样gif以改变它的速度。

我没有尝试过这个工具，但也许对你有所帮助：http://ezgif.com/speed

Answer 2

不......从不。因为gif是图像类型。您可以将其视为一组经常改变的图像。 CSS动画不会进行移动，因此无法控制是否使用CSS。找到另一个图像或制作自己的CSS动画。

Answer 3

遗憾的是，仅通过 HTML/CSS 无法直接控制 GIF 的动画。

然而，你的另一个问题的答案是“是”——有方法可以减慢你的 GIF，甚至在图像编辑器的帮助下启用对动画的完整 CSS 控制.

如果您愿意使用图像编辑器，例如优秀且免费的GIMP，那么有一些简单的方法可以解决此问题。无需经验。

---

简单的问题/解决方案

当你真的只需要改变 GIF 速度并且真的不需要用 CSS 来控制它时。

1. 使用 GIMP 打开您的 GIF 文件。
2. 在“图层”面板中，将图层显示持续时间更改为每个图层所需的时间。它显示如下：(40ms)。只需双击名称并输入您的新时间（如果您想在本例中将速度减慢到一半，则为 80 毫秒），然后按 Enter。
3. 导出为 GIF！

---

复杂的问题/解决方案

当您确实需要使用 CSS 动态控制动画时。

概述：我们会将 GIF 转换为 PNG 精灵图，使其成为 HTML 元素的背景图像，然后使用基本的 CSS 动画逐步移动帧。这样我们就可以完全控制动画缓动、持续时间和延迟。下面的代码显示了结果的基本示例，然后是详细的细分。

HTML

<div class="slowme"></div>

CSS

.slowme {
  background: url("url-for-spritemap.png") 0 0 no-repeat;
  background-size: 2400%;
  animation: anim-ss steps(23) 1s infinite;
}
@keyframes anim-ss { 0% {background-position: 0%;} 100% {background-position: 100%;} }

详细说明

1. 将 GIF 转换为精灵图。您可以完全手动执行此操作，但如果 GIF 有很多层会很乏味。 （有关详细说明，请参阅底部的手动和自动 spritemap 解决方案。）
2. 将 spritemap 设置为 div 的背景图像。
3. 将 background-size 属性设置为 100% 乘以您的帧数。在这个例子中，我有 24 帧，所以 background-size 是 2400%。这会相对于 div 的宽度更改图像的大小，以便 spritemap 的每个“框架”都是填充 div 的宽度。
4. 向您的 CSS（下面的代码）添加一个基本的关键帧动画，以随着时间的推移控制位置。这将在动画过程中从右向左移动背景图像。
5. 为 div 设置动画，包括用于 animation-timing-function 属性的 steps()。将步长设置为帧数减 1。由于本示例中有 24 帧，因此我们将使用 steps(23)。如果没有台阶，图片背景会平滑滑动，台阶会随着边框宽度同步移动背景。
6. 就是这样！

动画看起来应该与 GIF 完全一样，除了现在您可以像标准 CSS 动画一样控制它。

控制示例

/* Slow the animation (by increasing duration) to half */
animation: anim-ss steps(23) 2s infinite;

/* Delay the animation start by 5 seconds */
animation: anim-ss steps(23) 1s 5s infinite;

/* Pause the animation (can use to pause/play with a JS button) */
animation-play-state: paused;

/* Play animation in reverse */
animation: anim-ss steps(23) 1s 5s infinite reverse;

我知道这是很多额外的信息，但我真的希望它能帮助到那里的人！

---

详细的 GIMP 说明

请注意：这些说明在撰写本文时是正确的，使用的是 GIMP v2.10。如果他们让您失望，未来的读者，请参阅 GIMP documentation。

手动 Spritemap 转换

1. 增加画布宽度，为所有框架腾出空间。因此，如果 GIF 为 219x219 像素，并且有 10 层（帧），则将画布宽度更改为 2190 像素。
   • Image > Canvas Size
2. 设置网格以方便捕捉。
   • View > Show Grid
   • View > Snap to Grid
   • Image > Configure Grid
     • 将水平和垂直间距设置为您的框架尺寸。
3. 在每一层上，将内容移动到相应的网格位置。所以基本帧图像在最左边的槽中，然后第 2 帧（在第 2 层）直接在右边，依此类推。
   • 在“图层”面板中单击要移动的帧的图层以将其选中。
   • 按 M 选择“移动工具”。
   • 使用 ctrl/cmd-a 选择图层的内容，然后将它们拖到正确的网格位置。
4. 导出为 PNG：File > Export As，然后将文件扩展名更改为 PNG 并导出。

自动精灵图转换

一个简单的 GIMP plugin created by Spydarlee 将为您自动化整个过程。

1. 下载该文件（或自己创建一个 script.py 文件并将代码粘贴到其中）。
2. 将脚本粘贴/移动到您的插件文件夹中。
   • 在 GIMP 中查找插件文件夹位置：Edit > Preferences > Folders > Plug-ins
3. 重新启动 GIMP 以加载插件。
4. 在 GIMP 中打开 GIF。
5. 使用插件：Filters > Animation > Create Spritesheet
6. 更改“输出为单行？”选择“是”，然后单击“确定”。大功告成！