问题标签 [webkit-animation]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1202 浏览

html - 将两个 webkit 动画设置为相同的速度,而一个移动距离更长?

[编辑:解决方案是创建两个容器,将第二个动画容器设置为左侧:100%。]

我有一个非常基本的动画来在页面上移动一个大的 gif,这个 gif 是 1536px 宽。

页面可以无限​​宽,因此动画从 right:0px 开始,到 right:100% 结束。实际上,我不希望页面大于当前使用的最高显示器分辨率。

为了营造动画无限发生的感觉,我创建了第二个动画,并从右:-1536px 开始,在右:100% 结束。

不幸的是,由于第二个动画覆盖的距离更远,它的移动速度比第一个快,我尝试的无缝动画不起作用。有没有办法指定动画持续时间以每秒 1 像素或等效的速度工作而不是持续时间?我不相信我可以增加匹配的持续时间,因为浏览器可以是任何大小。

任何帮助或想法表示赞赏!

我的代码如下:

0 投票
1 回答
31 浏览

css - 一个 -webkit- 动画工作,但另一个不是

这是我的CSS代码。在 Safari 中,第二个 :hover 伪类规则工作正常,但不是第一个。在 Chrome/IE 中,它们都可以工作。

我错过了什么吗?它们的设置基本相同...

0 投票
0 回答
221 浏览

jquery - 使用 css 动画更改链接的背景颜色

我正在尝试使用 css 动画更改锚标记的背景颜色。我希望颜色在特定链接上淡入,具体取决于用户在页面上的位置。为此,我创建了一个关键帧设置以淡入颜色,然后创建一个将该动画添加到元素的类。然后我通过javascript将该类添加到锚标记,但我似乎无法让它工作。

这是我的代码

HTML

CSS

JavaScript

我试图根据网站的滚动位置添加这个类,但是我似乎没有得到任何东西。我可以在元素检查器中看到基于滚动添加和删除类,但我没有看到任何动画效果,我猜我的 css 动画语法是关闭的。

非常感谢任何帮助,谢谢

0 投票
1 回答
165 浏览

html - 为多个 div/图像设置动画以在屏幕上滑动以实现直播布局(html、css、webkit 动画)

我正在尝试为我的直播设置一个小动画,将 3 个图像从左侧滑到屏幕上,一旦所有 3 个图像都在屏幕上,让它们在那里停留大约 30 秒,然后滑出屏幕。我也希望这个 30 秒的动画每 15 分钟自动重播一次。

我创建了一个图像来更好地帮助描述我在这里为我的直播想要实现的目标。

http://imgur.com/a/qxZff

话虽这么说,我现在有一个有点工作的版本,但它目前只有一张图片,这里是代码:

任何输入都会很棒。我对任何与代码相关的知识都非常有限,这只是我在互联网上搜索并试图弄清楚这一点。谢谢你的帮助!

0 投票
1 回答
57 浏览

javascript - 眨眼动画突然停止工作

所以我使用blink webkit 框架让我网站上的内容以黄色/蓝色闪烁。我在 JS Bin 中测试了代码,它工作了,但由于某种原因它不再工作了。

也许我不小心删除了代码中的某些内容?这真让我抓狂!!

0 投票
1 回答
114 浏览

javascript - webkitAnimationEnd 在开始时触发

我正在尝试为在屏幕上水平移动文本的滚动代码设置动画。

webkitAnimationEnd 事件似乎在页面加载后立即触发,而不是在动画完成时触发。为什么会这样?

当我使用相同的方法查看其他示例时,使用同一浏览器查看事件似乎正确触发 - 所以它一定是我的代码有问题。我想检测“结束”事件,以便在重新滚动代码之前更新 div 元素中的文本。)

这是我的代码(也在 jsFiddle 中,这里):

我只想使用 CSS 和 Javascript(而不是像 Jquery 这样的库)。

0 投票
2 回答
168 浏览

html - 由于 CSS 动画,未处理复选框上的单击事件

我有一个输入和一个复选框,当输入聚焦时,它会在其下显示一些信息。

问题是:当我点击复选框显示这些信息时,它会隐藏信息(因为我的输入不再集中)但未选中复选框。

这是一个重现此行为的工作 plunker 。

有没有办法checkbox在这种情况下进行检查?

编辑 :

我认为问题是因为输入失去了对事件的关注mousedown并且复选框在事件上被选中mouseup(或者可能click)所以当mouseup事件被触发时输入已经失去焦点所以它下面的消息被隐藏并且复选框移动向上。因此,当mouseup触发事件时,光标不再位于复选框上,这就是未选中复选框的原因。

0 投票
3 回答
395 浏览

css - 如何反转这个圆圈动画?

我在网上找到了这段代码片段,我试图将其反转,以便圆圈从 0% 的全白渐变到 100% 的渐变圆圈,然后停止动画。但是我似乎无法弄清楚倒车部分。我试过摆弄这些值,但似乎无法获得预期的效果。摆脱渐变部分未显示后仍然存在的小轮廓也很好。干杯

0 投票
0 回答
175 浏览

html - 仅使用 CSS 在固定语音气泡内创建打字机效果动画

我正在尝试在“容器”/语音气泡内创建打字机效果动画。出于演示目的,我在文本中进行了硬编码,但在我的最终代码中,它被分配给一个 ID,该 ID 通过来自 SQL 表的 Javascript 填充。正如你所看到的,我有几个问题 1. 我在左侧失去了我的语音/引用效果,2. 在 CSS 中使用换行可以显示我的所有文本,但绝对令人眼花缭乱,如果我使用 nowrap 它不会显示全文。我对此进行了很多研究,并尝试使用 span 和 nth-child,虽然这对我的 ID 值是不可行的,因为它会根据 SQL 表中的数据动态变化。

0 投票
0 回答
331 浏览

html - 如何使用仅使用 css 和 html 的换行符来实现打字机效果?

如何使用仅使用 css 和 html 的换行符来实现打字机效果?

我正在制作一个个人网站,并且正在尝试在我的网站上制作我想要的某些元素,我对 css 动画很感兴趣,我想用两行打字机

但是有三件事是错误
的: • 文本没有完成(而不是 dylxntn,它变成了 dylxn,并且由于某种原因程序员变成了程序)
• 时间不正确,我无法得到正确的时间
• 第二行删除然后重写自己,而不仅仅是写作本身
,这些事情是我唯一知道错的事情,可能有一些我不知道的事情。