你能记录一下css关键帧动画并保存为gif吗？

Question

有没有人成功录制过浏览器中的动画？

我的目标是以某种方式保存或导出关键帧动画作为gif，以在仅支持图像和文本的在线投资组合中展示有趣的项目。

我测试了RecordIt，但它并不完全符合标准。

意识到动画模型可以在After Effects甚至Photoshop中构建......但是将它们与实时关键帧相匹配非常繁琐。 （但是，如果有人有这方面的好教程......带上它！）

疯狂还是可能？

Answer 1

你可以安装Camtasia并记录gif。然后你可以直接将它制作为gif（我从未尝试过）或将其制作为视频，然后使用Photoshop将其转换为gif

Answer 2

当你要求录制动画时我假设你已经知道你到目前为止不能简单地从浏览器中保存它们。

也就是说，根据您所使用的操作系统，您可以使用LICEcap（MS Windows或Apple OSX），GifCam或ScreenToGif（仅限MS Windows），{{3} }或Byzanz（仅限Linux）。

这个过程很简单，只需很少的简单步骤。 有关LICEcap示例，请参阅StackOverflow上的Peek到类似的其他问题;每个其他提到的软件的原则都是一样的。

最后，我认为您可能会发现VividD answer也很有趣（例如使用GifCam + Photoshop）。

Answer 3

您可以尝试使用github.com/davidderaedt/after2css

导出作文

  

AfterEffects CSS动画导出器

     

此After Effects脚本将合成导出到CSS关键帧动画。

     

限制＆amp;已知问题

     

不支持嵌套合成。
   - 表达式不受支持，应在导出前转换为关键帧    - 仅支持位置，比例，不透明度和旋转变换动画    - 锚点转换为变换原点，但不能设置动画    - 线性缓和转换为线性，其他缓和转换为默认缓动。此时不支持立方贝塞尔曲线。保持关键帧是模拟的，应该按预期工作    - 位置动画使用顶部/左侧属性，其中转换将提供更好的性能