CSS translate with transition在Firefox中创建跳跃动画

文章/答案/技术大牛

发布

1回答

css、firefox

下面的代码片段是Firefox中一个似乎是bug的简化示例。如果translate x轴大于div的宽度，则过渡效果非常不稳定。在其他浏览器上测试过，在其他地方看起来都很好。这在某种程度上也与overflow设置有关，因为如果我删除它，在Firefox中也是可以的。div.wrapper { overflow: hidden;div.block { c

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

2回答

如何在<text>元素中使用CSS转换？

javascript、html、css

在我的图表中，我有一个<circle>，里面有一个<text>，圆圈在附近移动。当圆圈在移动时，文字就会离开圆圈。{ transition-duration: 3s;}

浏览 7提问于2017-04-04得票数 2

回答已采纳

1回答

关键帧动画在IE上触发类删除(10，11,12，13)

css、internet-explorer、css-transitions、css-animations

我使用以下内容创建了一个CSS动画： -webkit-animation-name: sectionIn;} .... transition: all 800ms ease; Demo

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

回答已采纳

3回答

Firefox :用translate3d动画的元素从父容器中流出

android、css、firefox、mobile、translate3d

我有一个元素，我用translate3d转换动画。父元素具有overflow: hidden，但是在FirefoxMobile19.0.2动画期间，动画元素在父元素之外可见。动画化top属性而不是translate3d是可行的，但是它没有硬件加速，而且不够平滑。 -webkit-trans

浏览 5提问于2013-03-14得票数 3

回答已采纳

1回答

用于移动图像和div的CSS3动画

css、animation

我是CSS3动画的新手，在尝试创建幻灯片菜单时遇到了一点小问题。class="test" src="http://www.vectortemplates.com/raster/batman-logo-big.gif"></div> 下面是CSStranslate(160px,0px); /* CSS3 *

浏览 3提问于2015-01-13得票数 0

1回答

转换(x，y，z)中的百分比值不起作用

css、css-transforms

我有动画使用翻译一个2D翻译。但我希望执行硬件加速，因此使用了translate3d()。{ -webkit-transform: translate3d(0%,110%,0%); /** Safari & Chrome**/ } .objecttransition {

浏览 2提问于2014-01-17得票数 2

回答已采纳

4回答

CSS转换不同行为取决于浏览器类型

javascript、jquery、css、css-transitions

在我的代码中，我根据当前鼠标X&Y位置更改了某些元素的位置。我添加了一个css transition: all 5000ms;，以使动画更加流畅。它看起来很棒，在Google (版本63)中可以正常工作，但是在、Internet、和Firefox中，动画看起来很滞后/不稳定。这是我的代码： // $('.shape').css</em

浏览 8提问于2017-12-12得票数 11

回答已采纳

2回答

使CSS转换动画工作

javascript、jquery、css、animation

我目前正在玩CSS动画，我想拿一只平手，让手向下移动，也就是说，有一个空白页，并有一只手向下移动页面。因此，我没有成功。/images/hand.gif"></div>.handmove{ -moz-transform: t

浏览 1提问于2014-01-15得票数 0

回答已采纳

1回答

转换动画在Safari上不能正常工作。

javascript、css

我使用CSS转换来创建淡出动画效果。ease; opacity: 1; -ms-transform: translate(0); }function animations() { appearitem.addClass(

浏览 4提问于2022-04-25得票数 0

回答已采纳

2回答

div的CSS3变换标度导致Firefox中的子元素跳转

html、css、firefox

我试图在CSS3中扩展一个元素。这个元素有子元素，当动画完成时，子元素会跳来跳去。这似乎只发生在Firefox中。我已经尝试了很多在这里找到的修复方法，但是似乎没有一个能完成这个任务。; transition: all 0.5s ease-in-out;.focus:hover {-webkit-transform: translate3

浏览 4提问于2014-09-16得票数 6

1回答

我有一个div，我用css3在悬停状态下进行动画处理。动画进行得很顺利，但是当我的鼠标离开div时，它会迅速回到它的原始位置，而不是动画的ack回到它的原始位置。下面是我的代码： -moz-transform: scale(2.16,2.5) rotate(0deg) translate(0, -53px)translate(0, -53px) skew(0deg, 0deg); transition</em

浏览 0提问于2011-08-12得票数 0

回答已采纳

1回答

在Edge中更改元素的类后，过渡不会显示动画

css、css-transitions、microsoft-edge、css-transforms

我有一个定义了transition属性的元素。我通过切换一个类来在两个状态之间进行动画处理。但是，在边(40.15063.674.0，EdgeHTML 15.15063)中，如果上一个变换尚未完成，则不会设置变换的动画(状态会立即更改)。setTimeout(() => {

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

1回答

在Chrome上没有为Z转换执行动画

html、google-chrome、css、css-transitions

我试图使用以下CSS代码在Z轴上为HTML元素创建一个简单的动画：-webkit-transform: perspective(100px) translate3d(0px, 0px, -20px);编辑：如果我

浏览 3提问于2013-04-07得票数 0

回答已采纳

3回答

使用javascript激活css动画/翻译

javascript、css、css-animations

我正在尝试摆脱javascript动画，而使用CSS动画。我目前正在使用jQuery的动画功能。.demo1 { -moz-transition:all .5s ease-out; -ms-transition-webkit-transform:translate(0px,10px)

浏览 0提问于2013-02-11得票数 3

回答已采纳

1回答

使用css3动画时，translate3d的性能会更好吗？

performance、css、translate3d

(0,0,0);}.connectanimation { -moz-transition: all .7s ease("margin-top","100

浏览 1提问于2012-03-08得票数 2

3回答

AngularJS在Firefox中不能正确滑动的CSS3动画

angularjs、css、firefox、angularjs-ng-repeat、css-animations

我制作了一个连接到ng-repeat的CSS3动画，然后显示一个带有Bootstrap3的inline-list，我限制了列表中显示的最多3个的数量，并且我有一些小问题，主要出现在火狐中(信不信由你，IE11我有两个按钮(上一个/下一个)，当我点击Next按钮，然后从左向右滑动的动画开始做他的工作，但在Firefox中，当多次点击时，动画似乎只在列表的2/3上工作(基本上右边的最后一项总是首先显示，甚至没有滑动除此

浏览 1提问于2014-09-22得票数 7

1回答

CSS3转换/转换

javascript、jquery、css、css-transitions

我试图使用css动画某些元素，正如您在下面的代码中所看到的，就动画而言，一切都很好，问题在于动画元素所创建的空间。理想情况下，当元素不可见时，不应该有空白。在我的“在if ( x === true )下面的尝试”中，为元素创建了额外的空间，然后元素在创建的新空间中移动，但是当执行if语句else的第二部分时，流程反转，元素的空间就会消失，然后元素就会从视图中被动画化<div

浏览 1提问于2015-08-28得票数 1

回答已采纳

1回答

Safari 8和Chrome 43上的跳跃、断断续续的转换

css、google-chrome、safari、transform

这就是我的问题:我必须制作一个动画，以便根据你的鼠标位置滚动图像。我使用transform: translate3d()，但我尝试了translate和translate2d，结果相同。这个动画在Safari5/6/7和Firefox上运行得很好。在Chrome和Safari8上，它是跳跃的。事实上，这并不是一帆风顺的。非常感谢！

浏览 0提问于2015-06-24得票数 3

1回答

CSS3动画与过渡不平稳

css、firefox、animation、webkit

我正试图为一个项目开发一个幻灯片插件，但我遇到了CSS3动画/转换方面的问题。您可以在这里查看它：每一张幻灯片都有transform: translate3d(-100%,0,0)和transition: all。活动幻灯片也有一个动画，其部分写着transform: translate3d(100%,0,0)，以及他们的CSS中的一个新的转换属性为translate3d(0,0,0)。因此，他们从正确的<

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

1回答

translate3d与javascript、jquery之间的定位问题

javascript、jquery、css

在我的javascript中，我正确地将新页面放置在动画之前。不知何故，在动画之前没有执行定位。"transition-duration": "0",}); activePage.css("page-active&q

浏览 2提问于2013-09-14得票数 1

回答已采纳

点击加载更多