问题标签 [css-transitions]

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 投票
2 回答
659 浏览

css - 使用 CSS3 过渡模拟 Apple.com 搜索拉伸

我正在尝试重新创建 apple.com 可拉伸的焦点搜索框。我已经让它工作了,但我的拉伸背景图像作为他们的接缝优雅地添加到它没有放大镜拉伸。他们还设法将一种背景淡化为另一种背景。

这是我的 CSS

实施见http://www.golfbrowser.com/

0 投票
4 回答
1056 浏览

html - CSS 过渡不起作用?

由于某种原因,我似乎无法让 css 转换工作。我确信这是一个非常简单的错误。但我已经把头撞在墙上一个小时了。我在 Windows 7 64 位上使用 mozilla firefox 4.0.1。

0 投票
2 回答
2135 浏览

javascript - CSS transition-duration 不更新过渡?

我目前正在编写一个 jQuery 插件来创建/管理 CSS 转换,我发现转换持续时间的这种奇怪行为。

显然,在转换运行时,对持续时间属性的任何更改都将被忽略,除非正在转换的属性接收到不同的值。持续时间本身不会导致转换发生变化。

以下是一些显示此示例的代码,下面是一些指向 jsFiddle 的链接,可让您更好地了解我试图实现的转换行为。

关于如何强制过渡接受更新的持续时间的任何想法?

更新

看起来这种行为是在规范中定义的,但如果有人有解决方法,我仍然愿意接受。

(来自 www.w3.org/TR/css3-transitions/#starting)

属性的转换一旦开始,它必须根据原始计时函数、持续时间和延迟继续运行,即使“转换时间函数”、“转换持续时间”或“转换延迟”属性发生变化在过渡完成之前。

0 投票
2 回答
3672 浏览

css - 光标:指针;不适用于 css3 过渡链接

我在这里有一个奇怪的问题:http://alarmefast.com/securitasdirect2011/index.php

在左上角,我有一个链接设置为display:block;包含一个<span>我设置为使用 CSS3 过渡在悬停时旋转的链接。奇怪的是,它似乎与显示为指向手的光标冲突。

知道为什么吗?

谢谢。

编辑:我在 OSX 上使用 Chrome 12 beta。动画完成后,小手出现然后消失。

0 投票
1 回答
1145 浏览

css - CSS3 过渡效果

我最近一直在研究 CSS3,我做了一个设计只是为了好玩,有很多不必要的功能和效果。这里是:

http://wendyhenrichs.com/could/

如果您查看我在顶部的导航栏,您会注意到当您将鼠标悬停在链接上时,它会以平滑的过渡动作向右移动 7 个像素。

但是请注意,当您将鼠标从链接上移开时,它会立即跳回其原始位置。

有什么方法可以让它以平滑的运动淡入原位,就像它之前移动的那样?

0 投票
5 回答
60997 浏览

html - css3高度过渡不起作用

我在使用 css3 过渡时遇到问题如何使过渡平滑它立即出现
我希望 div 框在我将鼠标悬停在它上面时慢慢改变它的高度


html代码

jsfiddle

0 投票
4 回答
5940 浏览

css - 是否可以为 CSS 过渡指定自定义计时功能?

我现在非常频繁地使用 CSS 过渡,但发现它仅限于访问缓入、缓出等。贝塞尔曲线选项似乎允许最大程度的控制,但即使这样也不允许您指定一个实际的缓动方程将模拟弹性缓动等。是否有另一种选择,或者是否需要求助于 javascript 来执行这种类型的动画?

0 投票
1 回答
8539 浏览

ipad - iOS 设备上的 CSS3 过渡问题

我正在网站上尝试一些 webkit 转换,但在 iOS 设备上遇到了问题。我每秒随机旋转六张图像。六张图像中有五张过渡效果很好,但由于某种原因,在使用 iPad 或 iPhone 时,第六张图像在过渡期间消失了。

您可以在此处查看示例。

CSS:

Javascript:

我最初认为这是一个内存问题,但是从所有图像中删除了过渡,但一个图像并没有什么不同。为什么会发生这种情况的任何想法?

0 投票
3 回答
6979 浏览

css - 关于 CSS3 过渡和动画的高度自动的任何观点?

CSS3 过渡、变换和动画非常棒。它们甚至更多,现在更多的浏览器确实支持它们。

还有一件事我一直在问自己:为什么规范没有定义 CSS3 过渡和动画应该处理 height:auto?

当我们使用 CSS3 灵活框模型和媒体查询等东西摆脱固定布局时,这没有任何意义。

仅使用 JavaScript 设置具有固定高度的 CSS 过渡是没有任何意义的。

现在是我的问题:

W3C 是否会指定 CSS3 过渡和动画应该支持 height:auto 或者我们可以要求他们指定这一点?

0 投票
1 回答
187 浏览

jquery - Web Kit Transitions Left 功能不起作用——解决一个小提琴问题

我在 webkit 转换中的 position:relative 元素将其移动到左侧时遇到了巨大的麻烦。它应该工作,但没有。一个类是通过 jQuery 添加的,然后应该生效。

也许小提琴可能会有所帮助http://jsfiddle.net/4WmJz/1/

有任何想法吗?

奇妙