Questions tagged «css-transitions»

在下面的小提琴中，我分别对可见性和不透明度进行了过渡。后者有效，但前者无效。此外，在可见的情况下，过渡时间被解释为悬停时的延迟。发生在Chrome和Firefox中。这是一个错误吗？ http://jsfiddle.net/0r218mdo/3/ 情况1： #inner{ visibility:hidden; transition:visibility 1000ms; } #outer:hover #inner{ visibility:visible; } 情况2： #inner1{ opacity:0; transition:opacity 1000ms; } #outer1:hover #inner1{ opacity:1; }

102 css  css-transitions 

CSS转换完成后能否获得通知（如回调）？

100 javascript  css  css-transitions 

我正在尝试在纯CSS中实现“淡出”效果。这是小提琴。我确实在网上研究了几种解决方案，但是，在在线阅读文档之后，我试图弄清楚为什么幻灯片动画不起作用。有指针吗？ .dummy-wrap { animation: slideup 2s; -moz-animation: slideup 2s; -webkit-animation: slideup 2s; -o-animation: slideup 2s; } .success-wrap { width: 75px; min-height: 20px; clear: both; margin-top: 10px; } .successfully-saved { color: #FFFFFF; font-size: 20px; padding: 15px 40px; margin-bottom: 20px; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #00b953; } @keyframes …

96 css  css-transitions 

Webkit的过渡结束事件称为webkitTransitionEnd，Firefox为transitionEnd，歌剧为oTransitionEnd。用纯JS解决所有问题的好方法是什么？我应该浏览器嗅探吗？还是分别实施？我还没有发生过其他事情？ 即： //doing browser sniffing var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd"; element.addEventListener(transitionend, function(){ //do whatever },false); 要么 // Assigning an event listener per browser element.addEventListener("webkitTransitionEnd", fn); element.addEventListener("oTransitionEnd", fn); element.addEventListener("transitionEnd", fn); function fn() { //do whatever }

91 javascript  css  css-transitions  dom-events 

我使用由过渡移动6000个小div元素在CSS3实验top: 0来top: 145px测试性能。 使用没有硬件加速运行平稳谷歌浏览器。 如果我通过translateZ(0)性能启用硬件加速，将变得可怕。 为什么呢？ 这是我的示例代码：http : //dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html 更新（2014-11-13）：由于这个问题仍在引起人们的注意，我想指出的是问题本身似乎仍然存在，尽管在现代硬件提供的演示中可能不再可见上述的卡顿现象。较旧的设备可能仍然会遇到性能问题。

82 css  css-transitions  hardware-acceleration 

我对css3 transition属性的渲染速度有疑问。 假设我有许多要素： div, span, a {transition: all} div {margin: 2px} span {opacity: .5} a:hover {background-position: left top} div:hover {margin: -100px} span:hover {opacity: 1} a:hover {background-position: -5px top} 使用一个声明将所有这些元素的所有转换作为目标更有效div, span, a {transition: all}。但是我的问题是：以动画渲染的平滑度和快速度为目标，将每个元素的特定过渡属性作为目标是否会“更快”？例如： div {margin: 2px; transition: margin .2s ease-in} span {opacity: .5; transition: opacity .2s ease-in} a {background-position: left …

82 performance  css  css-transitions 

我正在使用CSS转换在CSS转换状态之间进行转换（基本上是在转换元素的比例）。我注意到当元素过渡时，页面上的其余文本（在Webkit中）倾向于稍微改变其呈现方式，直到过渡完成为止。 小提琴：http : //jsfiddle.net/russelluresti/UeNFK/ 我还注意到在我的标头上没有发生这种情况，标头上具有-webkit-font-smoothing: antialiased属性/值对。因此，我想知道，是否有任何方法可以使文本保持其默认外观（字体平滑的“自动”值）并且在过渡期间不更改渲染。 我尝试过显式设置文本以使用“自动”值，但这没有任何作用。我还应注意，将字体平滑设置为“无”也可以防止过渡期间渲染闪烁。 任何帮助表示赞赏。 编辑1 我应该注意，我使用的是OSX。在Parallels上的Chrome浏览器中测试时，我没有看到两个不同的段落的行为有所不同，因此这可能是Mac独有的问题。

81 css  webkit  css-transitions  css-transforms 

我有一个div的CSS动画，经过一定时间后会滑入。我想要几个div填充滑入的动画div的空间，然后它将这些元素向下推到页面上。 当我在第一个div尝试此操作时，即使看不见，幻灯片仍会占用空间。如果我将div更改为div，display:none则根本不会滑入。 我如何让div在不定时的情况下不占用空间（使用CSS进行计时）。 我正在为动画使用Animate.css。 代码如下所示： <div id="main-div" class="animated fadeInDownBig"><!-- Content --></div> <div id="div1"><!-- Content --></div> <div id="div2"><!-- Content --></div> <div id="div3"><!-- Content --></div> 如代码所示，我希望隐藏主div，而其他div首先显示。然后我设置了以下延迟： #main-div{ -moz-animation-delay: 3.5s; -webkit-animation-delay: 3.5s; -o-animation-delay: 3.5s; animation-delay: 3.5s; } 正是在这一点上，我希望主div在出现其他div时将其推下。 我该怎么做呢？ 注意：我已经考虑过使用jQuery来做到这一点，但是我更喜欢使用严格的CSS，因为它更平滑并且可以更好地控制时间。 编辑 我尝试了Duopixel的建议，但是我误解了而未正确执行此操作，或者它不起作用。这是代码： 的HTML <div id="main-div" class="animated fadeInDownBig"><!-- Content --></div> 的CSS #main-image{ height: 0; …

79 css  css-transitions  animate.css 

我有一个可用作设置页面的表单。修改表单元素后，它们被标记为unsaved并具有不同的边框颜色。保存表单后，它们将使用其他边框颜色标记为已保存。 我想要的是，保存表单后，边框将逐渐消失。 订单将去： <input type='text' class='unsaved' /> Not saved yet, border is yellow <input type='text' class='saved' /> Saved, so the border is green <input type='text' class='' /> Fade out if coming from class saved 如果在saved删除类时可以触发CSS3转换，那么它可能会淡出，并且一切都会变质。当前，我必须手动对其进行动画处理（当然，使用插件），但是它看起来比较不稳定，并且我想将代码移至CSS3，以便更加流畅。 我只需要此功能即可在Chrome和Firefox 4+中运行，尽管其他版本会很好。 CSS： 这是关联的CSS： .unsaved { border: 3px solid #FFA500; padding: 0; } .saved { …

78 css  css-transitions 

如何在鼠标悬停时使字体大小变大？随着时间的推移，颜色过渡效果很好，但是由于某种原因，字体大小会立即切换。 样例代码： body p { font-size: 12px; color: #0F9; transition:font-size 12s; -moz-transition:font-size 12s; /* Firefox 4 */ -webkit-transition:font-size 12s; /* Safari and Chrome */ -o-transition:font-size 12s; transition:color 12s; -moz-transition:color 12s; /* Firefox 4 */ -webkit-transition:color 12s; /* Safari and Chrome */ -o-transition:color 12s; } p:hover { font-size: 40px; color:#FC0; }

77 html  css  css-transitions 

我已经编写了一个脚本（在这里用户的帮助下），该脚本允许我扩展选定的div并通过相等地拉伸以适合剩余的空间（使第一个div的宽度固定）来使其他div相应地表现。 这是我要实现的目标的图片： 为此，我使用flex和transitions。 它运作良好，但是jQuery脚本指定了“ 400％”的拉伸值（非常适合测试）。 现在，我希望所选的div扩展/缩小以完全适合内容，而不是“ 400％”固定值。 我不知道该怎么做。 可能吗 ？ 我尝试克隆div，使其适合内容，获取其值，然后使用该值转换BUT，这意味着我的初始宽度为百分比，但目标值为像素。那不行 而且，如果我将像素值转换为百分比，则无论出于何种原因，结果都不完全适合内容。 在所有情况下，这似乎都是实现我想要的目标的一种复杂方法。 是否没有可以转换的flex属性以适合选定div的内容？ 这是代码（为了便于阅读，对其进行了编辑/简化）： var expanded = ''; $(document).on("click", ".div:not(:first-child)", function(e) { var thisInd =$(this).index(); if(expanded != thisInd) { //fit clicked fluid div to its content and reset the other fluid divs $(this).css("width", "400%"); $('.div').not(':first').not(this).css("width", "100%"); expanded = thisInd; …

9 javascript  jquery  css  flexbox  css-transitions