使用CSS变换和过渡设置SVG动画

文章/答案/技术大牛

发布

1回答

html、css、svg

在我正在做的SVG动画中，我需要帮助。对于如何在Illustrator中更改代码/SVG，有什么建议/解决方案吗？(我对XML一无所知，所以我不知道XML代码是什么意思。)C89.8,0,4,85.7,4,191.5C4,296.9,89.1,382.3,194.3,383l0.4-55.7C120.1,326.9,59.7,266.2,59.7,191.

浏览 7提问于2017-01-25得票数 1

3回答

使用CSS3动画时，iPad 2的性能是否比iPad 1更好？

ios、ipad、html、css、hardware-acceleration

在iPad 1上使用HTML5和CSS3应用程序进行开发后，我们对CSS3动画/过渡/变换(硬件加速)的性能感到失望。我们希望iPad 2能带来更多的动力，并在这方面表现得更好。但事实真的是这样吗？我们不能使用iPad 2，并且听说iPad 2在处理CSS3动画/过渡/变换方面仍然存在问题，速度慢，不可靠。有没有人能说明这一点？

浏览 1提问于2011-04-20得票数 1

回答已采纳

2回答

检测属性是否可以通过CSS3变换设置动画？

javascript、animation、css、transform、transition

可以使用CSS3过渡设置动画效果的属性列表在不同的浏览器中并不一致，并且可能会随着新的浏览器版本而发生变化。例如，-moz变换在FF3.6中不能使用-moz变换设置动画，但它在FF4中。那么，有没有一种方法可以在JavaScript中检测特定属性是否可设置动画？我不喜欢使用用户代理嗅探，因为它不可靠。提前感谢！

浏览 3提问于2011-01-13得票数 6

回答已采纳

1回答

在带有<svg>元素的Safari上不能使用ScrollReveal.js

javascript、css、svg、css-transforms、scrollreveal.js

我目前正在使用ScrollReveal.js让一堆小的像素化的盒子在滚动时做一些随机的事情，代码如下：$(document).ready(function(){<rect class="pixel-box" id="Rectanglefilter-35)" x="823.65422" y="188.994

浏览 4提问于2015-08-11得票数 4

2回答

提供x，y，宽度和高度值，如何得到从中心缩放的svg变换矩阵？

php、svg、imagemagick

我有一个代码，它使用php和imagemagick从svg生成gif文件。下面是示例svg代码。假设动画是通过从0到1的比例变换标度值来创建的，那么如何使用svg元素属性x、y、宽度、高度来获得转换矩阵，以使变换原点中心化？注意:我使用php完成所有的计算，并使用Imagemagick将其转换为光栅，我认为这不支持css转换的样式。目前，过渡从左边开始。我想用矩

浏览 1提问于2019-01-17得票数 1

回答已采纳

2回答

在iOS - CSS3和jQuery动画上，哪一个是最有效的？

jquery、ios、css

iOS设备渲染CSS3动画/变换/过渡是否比我使用jQuery做同样的动画更流畅？

浏览 4提问于2011-12-30得票数 3

回答已采纳

1回答

如何重新创建移动Apple.com菜单按钮动画？

javascript、jquery、html、css

在我开始之前，我想声明我不打算使用这个动画做任何事情。我只是觉得它很酷，想看看它是如何工作的。去过apple.com吗？大多数人都有，有些人在他们的手机上。如果你看过，你应该已经看过这个移动网站了--它使用了一个带有一些很酷动画的向下滑动的导航栏。但如何才能重现这一切呢？导航栏本身可以很容易地用倒置的方框阴影重新创建，但是如何将这两个图像(如果可能的话，在本例中是div)转换为动画，如显示的

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

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" r="20" fill="none

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

1回答

我有一个react应用程序，其中绝对位置div与SVG线连接，如下所示：橙色框组件的位置以redux状态存储，并且在相应框的x，y位置之间绘制线条。方框可以拖动，线条也会相应地变换。由于DOM中没有呈现任何新内容，因此我可以使用一个简单的css transition:转换来为框的位置变化设置动画效果，这样框看起来就不会从一个位置“跳到”另一个位置。但是，由于此css转换不会主动更改存储在redux状态中的框的位置，因此线条将保持静态，直到转换完成并更新状态，然后

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

2回答

如何在svg对象标签上使用css3动画？

css、svg

我将一个svg文件加载到一个object标记中，并希望对其进行动画处理。我这里有一段简单的测试代码，但有一个问题：谢谢 <body>

浏览 0提问于2015-06-27得票数 1

5回答

动画选项HTML5 Canvas/CSS3/jQuery

jquery、html、canvas、css、html5-animation

我感兴趣的是在HTML5/JQuery或两者的组合中做一些更像flash的动画。其中一个想法是飞鸟、角色动画和类似于“青少年”的动画序列。我是一个flash开发的背景，所以所有这些都是第二自然通过闪光的时间轴的动画补间系统，所以我想知道什么是可能的新技术，如HTML5画布，CSS3和jQuery？这些在补间动画方面有多熟练？在Flash中可以相对容易地实现这一点，创建动画片段作为电影剪辑，在舞台上生成这些动画</e

浏览 1提问于2011-03-28得票数 10

回答已采纳

1回答

根据索引将元素移动到列表中项目的位置

css、reactjs

我正在React中做一个小项目，我有一个包含文本的五个div的列表。在左边的幻灯片上，我有一个滑块，它应该占据所选项目的位置。在初始状态下，滑块采用第一个元素的位置。例如，如果选择了第三项，则需要将滑块移动到第三项的位置。因此，当选择项2时，滑块需要移动到第二项的位置。我已经尝试了一些东西，但没有得到想要的结果，因为滑块总是从项目1的位置开始。可以在这里找到一个最小的可重现的例子： https://codesandbox.io/s/stoic-tess-thcjp?file=/src/App.js 任何建议都将受到欢迎。

浏览 22提问于2021-10-17得票数 0

回答已采纳

1回答

带有转换和translateY的Safari bug：“jumping”元素

css、safari、webkit、css-transitions

在Chrome、Firefox、IE、Edge下一切正常例外 Safari (12.1.2 & 13.1.2)和 GNOME Web (WebKit)。在Safari下，元素“跳转”。其他与堆栈溢出相关的问题：在safari浏览器上使用css transform + width + left +顶部过渡跳转在Safari中转换变换和大小(9.1) 使用CSS过渡设置边距和填充

浏览 34提问于2019-09-17得票数 3

2回答

CSS3透视图属性到底是什么？

css、perspective、css-transforms

我在网上搜索了几个材料，但没有一个清楚地说明了这个概念，至少对我来说是这样。例如，w3schools说它定义了一个3D元素从视图中放置了多少像素。它太抽象了，无法完全理解。有没有人能用更生动易懂的方式告诉我？如果有一些图片来展示这个概念，那就再好不过了。

浏览 1提问于2012-04-05得票数 23

回答已采纳

1回答

RemoteIE EdgeHTML引擎会像Windows10上的边缘浏览器一样呈现站点吗？

css、microsoft-edge、browser-support、modern.ie

我正在使用RemoteIE应用程序()呈现一个包含CSS3 SVG动画的HTML页面。就像在IE11中一样，动画不起作用。在firefox & chrome的最新版本中，动画效果和预期一样。例如，在Microsoft Edge中，SVG属性:现在可以使用CSS动画和CSS过渡设置动画。

浏览 12提问于2016-04-12得票数 1

1回答

CSS3过渡/动画不起作用

animation、css、css-transitions

当涉及到过渡和动画时，我正试图将我的大脑包裹在CSS3上。我有一些框，我希望标题和描述时，悬停在框上动画。为了让它正常工作，我想我必须在触发包装器元素的:hover事件时定义动画。我想我只是没有在我的CSS中正确地执行它。

浏览 1提问于2012-04-05得票数 1

回答已采纳

1回答

三次Bezier过渡星巴克移动导航

mobile、css、navigation

我正在尝试基本上复制星巴克的移动导航，但我不知道如何在单击这三条线时获得平滑的幻灯片过渡。看起来他们正在使用CSS3过渡来实现这个动画，但我不能复制它。我得到了相同的结果，但是没有动画效果，因为CSS3没有动画display: inherit。这是我的JSFiddle，有没有人可以像Starbucks.com在他们的暴徒导航中使用的那样，使用CSS3立方贝塞尔变换来改进它？(你必须

浏览 0提问于2012-05-09得票数 0

回答已采纳

2回答

SVG <set>标签的dur属性不具有动画效果

css、svg、w3c

我正在尝试使用SVG标签来设置翻转动画，但即使我指定dur="1s"，过渡也是即时的(在火狐、Safari、<set>和Chrome中)。"40" stroke="black" stroke-width="2" fill="red"> <set attributeType="CSS" attributeName=

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

回答已采纳

2回答

用jQuery实现矢量图形的垂直平滑变换

jquery、dom、svg

我有： $(this).attr('transform', 'translate(0 -350) rotate(0)');变换可以工作也就是说，它似乎“跳”到了新的位置，而不是过渡到新的位置。我这样做是对的吗？我

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

回答已采纳

1回答

传单:变焦后，变焦前如何获得lat lng的像素位置

javascript、svg、d3.js、leaflet、mapbox

我想要转换:将一个SVG组转换成一个latLng像素位置，并在缩放后保持该位置。.}); 我试着查看来源，看看传单标记是如何重新定位的，因为这本质上是我试图模仿的行为，但没有效果。

浏览 3提问于2015-01-23得票数 2

回答已采纳

点击加载更多