css动画translate3d中断:动画之前

文章/答案/技术大牛

发布

1回答

css、animation

我有一个问题，我已经把动画放在div元素上，以便在打开时滑动得很好(这是一个模式框)： 0% { } opacity:1; width:650px; animation: 1s slideup

浏览 14提问于2017-08-09得票数 0

1回答

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

javascript、jquery、css

在我的javascript中，我正确地将新页面放置在动画之前。不知何故，在动画之前没有执行定位。activePage.index() + 1) > newPageIndex) { } "transform": "tr

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

回答已采纳

2回答

Android:布局翻转动画

android、animation、material-design、materialized-views

我正在尝试开发一个带有动画的UI (Android本地代码)。在这里，当滑动离开时，一个新的布局将显示为翻转动画，而当向下滑动时，另一个布局来自顶部的翻转动画。当我在两个布局上上下滑动到可见时，我通过点击侦听器实现了这一点，但它不是动画。有谁能事先告诉我谢谢吗？)

浏览 7提问于2015-09-01得票数 2

1回答

过渡和变换前的CSS位置元素

javascript、html、css、css-animations、css-transitions

我正在尝试翻译一个带有css转换的div，并将一个带有css转换的转换应用到移动中。可以为元素指定一个“开始”位置吗？我需要在动画之前转换元素。mediaViewItem:nth-child(3) { transform: translate3d(-200%, 0, 0); translate3d(-100%, 0, 0); } 在上面的代码中，我需要在没有

浏览 16提问于2020-09-03得票数 0

1回答

让我来解释一个例子，假设我的初始动画如下：-webkit-transform: translate3d(300px, 200px, 0px) rotate(20deg); 我用javascript设置了这一点，如果在这个转换结束之前，我想改变translate3d或旋转到新值，但我不想停止转换，我想让它平滑地转换到这些新值，而不中断正在运行的转换。我不想用javascript来修改属性，比如top&#

浏览 2提问于2011-03-09得票数 3

2回答

在jQuery中动画前缀CSS规则

jquery、css、animation

我正在尝试动画化一个-webkit-transform规则。我试过：element.children': "translate3d(200px, 0, 0)", 200);element.children().cs

浏览 8提问于2014-04-18得票数 0

回答已采纳

1回答

在显示块后立即转换动画

javascript、jquery、css、animation

我试图通过用Javascript (jQuery)改变CSS来动画一个页面转换。我有两页，其中一页设置为无开始显示。transform','translate3d(0,0,0)'); page2.removeClass('animate').css('display', 'none').css('transform','translate3d(0,0,0)')

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

回答已采纳

1回答

-webkit-transform如何在保留translate3d()的同时更改rotate()？

css、webkit、transform、translate-animation

我要做的是在元素上运行css3动画时更改该元素的translate3d转换。然而，当我尝试这样做时，动画似乎每次都会在更新动画之前重置变换，因此平移始终为(0,0,0)。我希望动画能够运行，并且仍然可以使用javascript进行翻译，例如：我知道在内部div运行动画的同时使用第二个包含d

浏览 1提问于2011-11-16得票数 6

1回答

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

performance、css、translate3d

为了得到流畅的动画效果，我花了很多时间在网上搜索。 -o-transform: translate3d(0,0,0);在设置此属性后，您是否必须对其3d属性进行动画处理？或者，您可以动画任何css属性。("margin-top","100px"); // a normal css</

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

1回答

浏览器性能和使用Bodymovin和CSS动画的问题

javascript、animation、svg、css-animations、bodymovin

我正在建立一个充满SVG插图的网站，这些插图都是用制作的动画组件。我通常会安装GSAP和动画的东西，但这将意味着添加第二个JS动画库的背景，因为客户有

浏览 0提问于2018-08-31得票数 1

1回答

CSS不同的非悬停动画(CSS禅园示例)

css、css-animations

刚刚在上看到这个CSS的动画，并且想要重新创建动画，当你在中间卡上悬停时，它就开始了。通常，站点提供一个CSS样式表，但在这个示例中我找不到任何CSS样式表。悬停动画部分只是一个动画，首先翻译y轴，然后改变透视图。这种方法可以在悬停状态下启动静止动画，但是它只能处理单个动画，而不能处理连续动画。此外，通过使用from和to，在动画结束之前，当您解除悬停时，动画就

浏览 0提问于2021-02-18得票数 3

回答已采纳

1回答

当添加隐藏在事件上的溢出时，CSS转换在FF中不工作

javascript、jquery、css、firefox

我有一些问题，溢出隐藏和CSS转换。在添加代码以在<body>元素上设置<body>之前，转换动画工作良好。如果发生这种情况，则转换动画无法工作；元素只会立即更改。请看这个例子：#block { float: left; position: absolutetop: 0; width: 203px; height: 100%

浏览 3提问于2014-09-04得票数 2

回答已采纳

1回答

带有React路由器v4和react过渡组v2的动态页面滑动动画

react-router、react-transition-group

我之前问过一个关于如何实现页面滑动动画的问题：。 return ( <WrapRouters /> );CSS{ transition: all 600ms;动画：如果

浏览 1提问于2017-08-31得票数 2

1回答

创建一致的简单横幅文本动画

javascript、jquery、css

1滑入时，幻灯片1上的文本没有动画，从这里开始动画就不会发生。我的灵感来自这个网站的横幅动画：@-webkit-keyframes bounceInDown { transition-timing-functiontransform: translate3d(10px, 0, 0); transform: translate3d(-5p

浏览 2提问于2015-03-29得票数 0

1回答

Safari中的CSS动画

html、ios、macos、safari、css-animations

我已经设置了一个动画，一个徽标出现在一个新网站的导航上。该动画有三个SVG片段，并将每个片段都设置为动画。然而，在Safari和iOS设备上，徽标缺少中心部分。我已经使用Animate.css制作了这些基本的动画，但找不到中间部分的不同之处。动画代码是： 0% {-webkit-transform: translate3d(0, -100%transform: n

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

1回答

Animate.css动画在动画完成后消失

css、animation、css-animations、css-transitions、animate.css

我正在尝试构建一个菜单，其中每个列表项都有一系列动画。它可以工作，但在动画之后，该项目再次消失。它看起来好像没有使用.animated的visible属性。你能给我任何方向来解决这个问题吗？

浏览 94提问于2020-02-05得票数 1

1回答

提高硬件加速css3动画的速度

javascript、animation、css、hardware-acceleration

我正在尝试在使用硬件加速的css3动画期间动态增加动画持续时间。使用javascript和非硬件加速的css3，我只是增加了动画的持续时间，动画速度就会加快。现在我使用translate3d而不是left属性来设置动画，增加动画持续时间是不起作用的。我有一种感觉，一旦动画卸载到GPU上，对css的更改不会对其产生任何影响。当我做了更改时，我需要一些方法来强制更新动画以供GPU使用。

浏览 3提问于2011-06-22得票数 0

回答已采纳

1回答

为什么动画迭代不能与延迟工作？

css、animation

我开始两个css-动画一个一个，并使用动画-延迟这一点。但我写动画-迭代-计数动画-1和动画-2，它只适用于动画-2。我不想用%，从-到。 animation-iteration-count: 2,2;@keyframes animation-1 { to { transform: <em

浏览 1提问于2019-03-27得票数 0

回答已采纳

1回答

如何使HTML元素稍微偏离视窗的边缘，使其在悬停时恢复正常？

javascript、html、hover、overflow、element

我想编写一个有多个框的评论部分(一个人一个框/评论)。有3个主要元素是可见的，每边都有2个元素稍微偏离页面，但当悬停在上面时会移动。有没有可能发生这样的事情？或者我应该做一个旋转木马，让周围的评论变得更容易？

浏览 14提问于2019-12-19得票数 1

2回答

抖动动画- Jquery / CSS3

javascript、jquery、css、animation

我试图结合jQuery和CSS3来提供流畅的动画，但我仍然发现动画可以是抖动的，即使在桌面上也是如此。 .css("-webkit-transform", "translate3d(0px,0px,0px)") .css("-moz-transfo

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

点击加载更多