如何在Firefox中使我在SVG元素上的CSS @keyframe动画更流畅，并减少对资源的消耗？

文章/答案/技术大牛

发布

1回答

css、svg、css-animations

This animation在每个浏览器中都有很高的CPU使用率，但在Chromium中要流畅得多。我如何优化它的执行？

浏览 26提问于2019-12-05得票数 0

6回答

浏览器对SVG SMIL (动画)的支持级别

svg

有没有人知道目前流行浏览器对SVG SMIL动画的支持情况？看起来Safari、Chrome和Opera都支持它。Firefox在其开发页面中有令人困惑的报告，关于已经添加了SMIL支持，但我不认为它是从v3.6开始的：看起来Opera是唯一一个可以正确渲染<e

浏览 0提问于2010-01-26得票数 14

1回答

在浏览器工作缓慢编辑器中，FPS的可接受级别是什么？

web-development、load-testing、svg

我正在开发一个图表化工具，需要一些度量来测试它。不幸的是，我找不到关于这类web应用程序的平均可接受的FPS级别的信息。我们都知道这些级别的动作游戏(至少60 for )，25 for的视频流。在绘制web应用程序时，可以提供一些最低的FPS级别吗？你会推荐什么工具来测试我的应用程序？

浏览 0提问于2014-06-12得票数 2

2回答

如何在css关键帧中存储内容或元数据？

javascript、jquery、css、animation、css-animations

有人知道为什么我在关键帧动画中看不到content属性的效果吗？然而，当$(<my animated html element>).css("-webkit-transform")在屏幕上移动时，反复测试div会返回不同的值。我不一定要使用content属性来显示任何内容。我希望能够在CSS keyframe规则中存储一些元数据，这

浏览 3提问于2013-09-07得票数 2

10回答

CSS3过渡还是jQuery动画？

jquery、ipad、css、css-transitions

我正在开发一个iPad HTML5应用程序，我已经实现了ontouch支持，可以更快地触发事件，并且我使用jQuery来更容易地定位元素，但对于动画，我使用CSS3转换你认为哪种方式更快？使用jQuery动画，因为我已经导入了库，或者在使用jQuery定位元素时使用CSS3过渡？

浏览 1提问于2012-06-12得票数 45

回答已采纳

9回答

如何在鼠标悬停后反转动画

css、animation

因此，可以在鼠标输出上设置反向动画，例如： transform: rotate(0deg); .class:hover{}.class{ animation-duration:2s; .class:hover{ animation-durati

浏览 1提问于2013-05-13得票数 114

2回答

<object>在svg路径上的定位

svg、path

我有很多对象使用相同的svg路径，这基本上是一个箭头。我想在另一个圆形的svg路径上定位对象，这样箭头看起来就像在向外“辐射”。我读了几篇文章，其中说使用<object>对svg提供更多的控制，但我找不到如何将<object>定位到另一个svg <object>路径(循环)。不只是手动旋转每一个<object>，<e

浏览 5提问于2014-03-06得票数 1

回答已采纳

1回答

使用JavaScript缩放动画时的抖动文本

javascript、animation、web-animations

在检查之前，请注意以下几点：所有的动画都是使用一些形式或模仿的CSS属性transform: scale(num);的动画，并有相同的放松和持续时间，使他们可以更容易比较。我得到的结果反映了Google 59中Windows 10机器上动画的外观，不过对我来说，Microsoft也显示了同样的结果。因此，

浏览 4提问于2017-06-09得票数 1

3回答

起伏过渡:在Safari上转换剥落动画

css、webkit、css-animations、mobile-safari

在Safari (移动)中，我很难制作不太稳定的缩放动画。我的意思是，你可以清楚地看到它不是60 not流体动画。我需要说的是，元素是绝对定位的，所以它不应该影响布局，对吗？我尝试的第一件事是通过创建带有两个关键帧的CSS动画来动画元素，从transform

浏览 0提问于2021-06-20得票数 0

回答已采纳

1回答

滚动链接动画的性能改进

javascript

我已经在JavaScript中创建了一些效果(以及简单的CSS控制动画)，它们工作得很好，但需要花费大量的硬件资源(特别是GPU)，所以在性能较差的设备上，网页在滚动时会显得迟缓。有趣的是，我打开了一些网页，在性能较弱的设备上也有很多滚动链接的动画，动画看起

浏览 0提问于2018-03-20得票数 1

3回答

动画接近切换幻灯片面板？

jquery、css、animation

我有一个简单的切换打开幻灯片面板在我的网站。我使用CSS动画的幻灯片和所有的工作很好，但我如何添加动画到面板时，有人关闭面板？所以用动画滑入和滑出。jQuery $(".slide-panel").toggle();CSS .slide-pan

浏览 3提问于2017-03-18得票数 0

回答已采纳

4回答

GPU加速的CSS动画与SVG原生动画

css、animation、svg、hardware-acceleration

我的问题是，什么是更快的原生SVG动画标签，比如： <animateTransformrotate" from="0" to="360" begin="0s" dur="3s" fill="freeze" repeatCount=&quo

浏览 1提问于2014-08-11得票数 21

2回答

用requestAnimationFrame实现稳定的帧率？

javascript、performance、animation、requestanimationframe

我在玩requestAnimationFrame，但除了Chrome之外，我在其他任何浏览器上都能看到非常不稳定的动画。this.update(); }} 现在，我只是在画布元素上画一个矩形并移动它这是处理器上的一个非常轻

浏览 1提问于2013-05-15得票数 9

4回答

SVG动画在IE11上不起作用

css、animation、svg、internet-explorer-11

我有一个非常简单的加载动画，可以在火狐和Chrome上完美地工作，但在IE11中它不能显示SVG图形。下面是完整的示例：<svg class="circular-loader" viewBox="25 25 50 50"> <circle class="loader-path" cx="50" cy="50&qu

浏览 0提问于2015-11-20得票数 30

3回答

移动元素的jQuery动画()与addClass()

javascript、jquery、animation

要移动元素，我可以使用jQuery、或#box { transition: al

浏览 5提问于2017-10-02得票数 0

回答已采纳

3回答

当"document.location.href“时，GIF图像停止

javascript、gif

我在javascript中有这个函数： showLoadPageGif(); // visibility On} 当我使用此功能时，GIF图像显示在屏幕上，但不起作用。

浏览 0提问于2013-02-08得票数 2

1回答

捕获html画布后未初始化NS错误

javascript、html、canvas

我试图使用javascript/html记录svg动画。这就是我迄今为止尝试过的： <svg width="370" height="370" viewBox="0 0 370 370" fill="none"-- my svg is here, full code is below because

浏览 7提问于2022-03-20得票数 0

回答已采纳

1回答

在web上下文中的颜色混合选项(乘)？

css、animation、svg、adobe-illustrator、blending

每个甜甜圈在不同的和弦上有不同的线性颜色梯度。目前，我正试图将其移植到网络上，并在颜色混合和乘法方面遇到重大问题。一些我试过的东西。

浏览 5提问于2015-01-06得票数 0

回答已采纳

1回答

我们如何在浏览器中缓存内联SVG？

javascript、css、html、svg

由于其可伸缩性，SVG已经存在多年，人们早就知道内联SVG的好处是可以用CSS和JS操作它，当我们想在html文档上重复相同的SVG时，我们可以使用<use>标记来引用原始元素。因为我碰巧在一个项目中广泛使用内联SVG，所以我想确切地知道如何在浏览器中缓存内联SVG(著名的html5元素，这是w3c推荐的</

浏览 1提问于2016-06-15得票数 9

回答已采纳

1回答

按鼠标移动用translate3d改变div位置

jquery、html、css、mousemove

我想要实现的效果，细分div的位置变化与css变换translate3d根据鼠标的运动。类似于这个网站主页的几何图形：$(window).mousemove(function(event) {}); 当我尝试用..basic技能来动画3 div

浏览 1提问于2016-10-10得票数 0

回答已采纳

点击加载更多