完美平滑的循环轻松css动画

文章/答案/技术大牛

发布

1回答

javascript、css、animation

我试图使一个元素从左到右缓慢移动一小段距离，并以一种平滑的方式完成，但效果不是很好。这是我到目前为止所知道的： .animate_sideways{animation:sideways 5s linear infinite; animation-timing-function: ease-in

浏览 16提问于2019-04-28得票数 0

3回答

关键帧动画-即时更改

html、css、css-transitions

我已经开始学习CSS3中的关键帧动画了。我注意到的一点是，无论我如何为关键帧动画“计时”，过渡始终是平滑的。再举一个例子:如果BG的50%值是红色，BG的100%值是蓝色

浏览 2提问于2013-01-26得票数 10

回答已采纳

1回答

在javascript计算时使用CSS动画

javascript、css-transitions、css-animations

我想在发生这种情况时显示一个正在加载的页面，可能还会播放一些css动画，但似乎在执行javascript时CSS动画会挂起。我已经有了一个加载栏，它在处理的关键事件上进行了更新，但我想使用css转换来使其更平滑一些。我知道我可以不时地将控制权交还给浏览器，让它刷新，但我发现用javascript在后台计算某些东西只是冻结了整个界面，这是很愚蠢的。编辑:这是我所说的一个愚蠢的例子：如果你禁用c

浏览 1提问于2012-10-06得票数 7

回答已采纳

4回答

jQuery中短距离、长持续时间的精细字体大小动画

javascript、jquery、animation、jquery-animate、font-size

我想以一种缓慢和微妙的方式动画一些文字。jQuery动画使用整数值，所以如果您想在两秒钟内将一个大小超过10 at动画，您将在五个FPS上看到一系列的小步骤，这些步骤看起来很不稳定。这是一个。我找到了一个关于动画位置的，但是top/left/etc属性是整数的，所以公认的答案是不可能的。然而，如果font-size会把真实的数字公之于众，那么jQuery就可以被动画</

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

回答已采纳

1回答

使css动画永远平滑循环

html、css、animation

我试图让我的css动画看起来更快，我想让它永远循环并平滑地执行，最后一帧应该看起来像第一帧，但现在，当动画结束时，它会迅速恢复到原始状态。我想在我的自定义滑块中使用这个效果。下面是我的代码： -ms-animation: move 30s ease; -webkit-animation: move 30s

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

2回答

Processbar循环，在Hover停

javascript、jquery、css、css-animations

: rgba(0, 0, 0, 0.3); foo(); });});CSS：我用jQuer

浏览 3提问于2015-11-16得票数 1

回答已采纳

2回答

如何动态结束正在加载的动画

javascript、loops、animation、loading、after-effects

我想创建一个加载动画(不是在CSS中，它是一个复杂的Adobe After Effects动画)。我的目标是创建一个不断循环的动画，每当加载停止时，动画都会以不同的方式结束。因此，每当调用animation.stop()时，动画都会有一个dynamic ending。我该怎么做呢？我的第一个想法是创建两个动画。循环动画和结束<

浏览 22提问于2019-02-14得票数 0

2回答

css3动画不断变化

css、css-animations

我正在尝试实现css3动画...我计划改变我的瞄准效果连续循环，但问题是，在一个循环后，它停止在红色，它不会进一步改变它的颜色。如何继续循环..。下面提供我的代码{height:100px;animation:myfirst 5s; -moz-animation:myfirst

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

回答已采纳

1回答

为多个SVG路径设置动画-性能建议

javascript、svg、inline-svg

我的页面上有几个SVG，可能最多10-15个。然而，在我的页面上，当鼠标移动时，路径会更新(它们会发生很大的变化，但形状仍然是一样的，所以路径不会更大)。我可以注意到，当这种情况发生在移动设备上时，例如Ipad，并且页面上有它们的3+，性能会受到很大的影响。我假设这是因为我的计算得到了新的路径，然而我使用了chrome工具(性能选项卡)，似乎我的设置对属性有相当大的贡献。所以我的问题是。当鼠标移动时

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

5回答

滚动到顶部不够平滑

jquery

".upp").click(function(){ });它将在动画中到达顶部，但动画并不流畅enough.it在某些部分跳跃，然后滑动到顶部。我使用的是简单的jquery库(最新版本).Do，你认为添加jquery UI能解决任何问题吗？请帮帮忙。

浏览 1提问于2013-08-06得票数 2

2回答

如何消除jQuery无限大背景循环中的故障？

html、jquery、css、css-animations、jquery-animate

我有一个背景图像设置为在10秒CSS动画上无限循环。我使用jQuery根据用户屏幕大小来查找图像的高度。然后我使用background-position-y，从0到图像的高度。这将为任何桌面屏幕大小创建一个平滑的循环(一个单独的bg图像将用于移动)。问题:在页面加载中，动画在循环的第一次迭代中似乎不能正常工作。图像缓慢平移10s，“跳转”回原来的位置，然后正确地

浏览 7提问于2022-09-26得票数 1

回答已采纳

2回答

CSS3动画-平滑无限循环

css、css-animations

我制作了一个小的背景动画，其中div会随着时间的推移改变颜色。它工作得很顺利，但当它达到100%时，它会直接跳到0%，而不会有任何过渡。我已经在谷歌上搜索并尝试了不同的动画制作方法，但我一直无法获得一个流畅的“重新启动”如果动画。我遗漏了什么？

浏览 1提问于2013-10-16得票数 13

回答已采纳

2回答

如何调试Javascript进程和动画？

javascript、debugging、css、firebug

有很多调试JavaScript代码的工具(比如FireBug、console)，但是是否有一个用于调试进程的工具？这可能需要监视资源(例如CPU)的使用情况，以查找进程中的瓶颈。我创建Javascript动画来移动元素(在一个更简单的案例打开/关闭菜单中)，但是移动现在是平滑的。不同的因素会导致过载，例如，沉重的CSS3梯度。但是如何检测速率限制过程呢？这确实是大多数网站的</em

浏览 6提问于2013-01-11得票数 3

回答已采纳

5回答

初始速度动画

javascript、math、actionscript、animation、physics

已知变量：T=动画持续时间终点速度应始终为零。我试图创建的函数:d(0.t)=给定时间的当前距离动画必须能够轻松地从一个初始速度.动画必须是准确的t秒，必须是旅行准确的d单位。曲线应倾向于平均速度，加速度发生在曲线的开始和结

浏览 10提问于2010-04-01得票数 9

回答已采纳

2回答

抖动动画- Jquery / CSS3

javascript、jquery、css、animation

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

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

1回答

将类似Office2013的动画添加到我的C#应用程序

c#、.net、wpf、winforms、office-2013

因此，在Office 2013中，应用程序具有“流畅打字”动画等动画，同时Outlook中的电子邮件列表可以平滑地移动电子邮件，而不仅仅是删除列表中的一个，或者让后台视图平滑地从屏幕一侧滑出。我想将来在我的应用程序中添加一些类似的动画。我的脑海中有一些关于如何动画这些东西的想法，但在我深入到许多定制工作之前，我想知道是否有人知道一个框架或其他东西，可以轻松地添加对这类东西

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

回答已采纳

1回答

如何获取usePrevious钩子的前一值( useRef钩子)

reactjs、typescript、react-hooks

为了实现流畅的动画，我必须创建一个使用setTimeout()函数的呈现循环，该函数每秒钟触发一次，并使用引用最新接收数据的useRef()钩子。); window.clearInterval(bioFeedbackDataAnimation);}, []); 这是完美的，动画是平滑的，因为渲染之间的时间是恒定的。但是，

浏览 13提问于2022-03-14得票数 0

2回答

如何顺利地将TranslateX从一个位置转换到另一个位置？

javascript、html、css

我面对这个问题由来已久，最后我设法做了一个演示的例子我的问题。我试着做一个无限的图像滚动视图。因此，当我们指向鼠标向下滚动到正确的位置时，在change超过40%之后，我想直接从translateX转换到最后一个项转换值( -400 40)，但是容器上有一个transition: 400ms ease，所以每当我试图将鼠标移动到右侧(从第一张图像返回)时，TranslateX值从0更改为-400，就会产生从0到-400的完全过渡效果，为了解决这个问题，我尝试在change达到40%之后删除过渡，然后更改t

浏览 9提问于2022-04-17得票数 2

1回答

动画SVG内嵌

animation、svg

我有这个设置与SVG完美地工作，但我很好奇，如果有人知道如何平滑过渡和/或添加动画之间的悬停动画我有。现在，规模正在增加，如果我能以某种方式获得动画，那就太棒了。我认为内联JS在某个地方是最好的/最灵活的，但我不确定如何正确地动画SVG。我想在这里的某个地方内联将是最好的，但我再次不确定它是否可能用内联SVG来平滑现有的缩放效果，或者是否需要一种不同的<

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

回答已采纳

3回答

动画图标字体微调器

css、css-transitions、css-animations

我已经在我的自定义图标字体中创建了12个字形来表示加载微调器(OSX/iOS样式)的每一个刻度。<span class="c12">&#xf012</span>这是CSS font-family: "nvicons"; .c1 { } .c12 {

浏览 1提问于2013-02-16得票数 1

回答已采纳

点击加载更多