问题标签 [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.
css - CSS - 边界上的过渡无法正常工作
CSS 代码：
HTML 代码：
过渡对除边框以外的所有元素都有效，它只出现在 400 毫秒结束时，对边框没有影响。
我想要实现的是像新的 google gmail 按钮这样的效果。
提前感谢您的帮助
css - CSS div 固定定位
我有一个 div，其中包含一个带有一些文本的较小 div。容器 div 有一个 webkit 转换，可以将其移出屏幕。我希望较小的 div 与它一起移动，直到它到达页面的边缘，然后保持固定，几乎就像它被“卡在”页面的一侧一样，而容器 div 继续在它下面移出视线。这可以做到吗？
javascript - 不透明的 CSS 3 过渡 - Chrome 和 Firefox
当我遇到一个奇怪的问题时，我一直在玩 CSS3 过渡以淡入覆盖 div。
基本上我有一个 div 元素，它的 id 上设置了样式 - 即背景颜色：#000、不透明度：0 等。以及特定于浏览器的过渡样式。默认情况下，覆盖元素上有一个“hiddenElement”类，将其显示设置为无。
当要显示覆盖时，将删除 hiddenElement 类，并添加另一个类“初始化”，该类将元素不透明度设置为 0.6。
我期望发生的是让元素平滑地动画化，这在 Opera 中确实发生了，但在 Firefox 和 chrome 中它并不能完全那样工作。
我在这里建立了一个孤立的案例：http: //jsbin.com/obojet/27/。
正如您所看到的，当“addClass('Initialised')”被包装在 setTimeout() 中时，即使在 chrome 中超时为 0 毫秒，它也能正确设置动画。只是在超时之外做 addClass，不会做动画。在 Firefox 中，超时时间必须更长 - 50 毫秒。在歌剧中它只是工作。
这可能归结为 UI/Javascript 争夺单线程，但我只是好奇是否有其他人遇到过类似的问题。
css - CSS 过渡淡入淡出元素
我想将一个元素从可见淡化为不可见。
我知道我可以这样做：
这样做的问题是（现在）不可见的元素仍然存在，占用了空间。
我希望它褪色然后完全消失，就像display:none设置一样。
css - webkit-transition，使用 width:auto 时出现异常
我有一个标准<ul><li><a></a></li></ul>模式的侧边栏导航，它使用溢出隐藏截断链接的全文。悬停 1s 后，我希望锚点扩大宽度，显示链接的全文。
我有这个功能完全在 CSS 中工作，但我遇到了异常：我将锚点的宽度设置为 Auto on :hover。触发 1s 延迟后，anchor 的宽度会捕捉到 0，然后扩展至其全宽。
下面是我的 css，在这里你可以看到我当前的代码：http: //eventfeedstl.com/day/07182011/
ipad - iPad WebApp：视频上方的转换按钮不起作用
我对 HTML5 视频和过渡有疑问。我清楚地看到了我在视频上方制作的两个过渡按钮，但我无法单击它。视频似乎捕捉到了点击。
有没有人有解决方案？
javascript - 在禁用 javascript 时检测 css 转换
我一直在使用modernizr和javascript来确定css转换是否可用，但是有没有办法在不使用javascript的情况下检查css转换是否有效？
css - 加载时的css3过渡动画？
是否可以在不使用 Javascript 的情况下在页面加载时使用 CSS3 过渡动画？
这是我想要的，但是在页面加载时：
http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html
到目前为止我发现了什么
- CSS3 transition-delay，一种延迟元素效果的方法。仅适用于悬停。
- CSS3 Keyframe，在加载时工作，但速度极慢。因此没有用。
- CSS3 过渡速度足够快，但在页面加载时没有动画。
javascript - 向 Mootools 手风琴元素添加活动类
随着 CSS3 的兴起，我想通过 css 转换控制 mootools 手风琴类使用的动画，我认为最好的方法是为手风琴的切换器和元素部分分配一个活动类。
我已经能够为切换器元素做到这一点，但经过多次尝试，我无法弄清楚如何为元素提供活动类。
到目前为止，我得到的 mootools 代码是：
如果有人可以提供帮助，我将不胜感激。
jquery - 没有应用过渡的 CSS3 rotateY
我正在寻找一种简单的方法来获取一个对象并转换它的 rotateY 属性，而不用动画到它的预设过渡。这将帮助我完成此幻灯片放映（仅在 Chrome 或 SAFARI（WEBKIT）中查看）
这是效果的细分示例：
CSS - 过渡设置为 5s
阶段1
元素1 - 旋转Y：0；
元素2 - 旋转Y：-180；
用户- 点击按钮
阶段2
元素1 - 旋转Y：180；
元素2 - 旋转Y：0；
第三阶段
元素1 - 旋转Y：-180 ；
元素2 - 旋转Y：0；
用户- 点击按钮
第四阶段
元素1 - 旋转Y：0；
元素2 - 旋转Y：180；
在第一次转换（阶段 1 和 2）完成后，需要将Element1的 rotateY 值设置为 -180，而不进行转换，以便它处于Element2在阶段 1 中的位置。有了这个，动画将使元素看起来相互旋转，正如您在我提供的示例链接中看到的那样。不幸的是，在所有元素都有rotateY：180之后，效果就停止了；
我想做一个 jsFiddle，但我现在真的没有时间在这个项目上。
我需要一个解决方案，只需将对象从 a 点带到 b 点，而无需任何动画/过渡
希望一切都有意义