标签: css-transitions

我正在使用CSS转换来在CSS转换状态之间转换(基本上转换元素的比例).我注意到,当元素转换时,页面上的其余文本(在Webkit中)倾向于稍微改变其呈现,直到转换完成.

小提琴:http://jsfiddle.net/russelluresti/UeNFK/

我还注意到,我的标题上没有这种情况,标题上有-webkit-font-smoothing: antialiased属性/值对.所以,我想知道,有没有办法让文本保持默认外观(字体平滑的"自动"值),而不是在转换过程中改变渲染.

我已经尝试明确设置文本使用"自动"值,但这没有做任何事情.我还应该注意,将字体平滑设置为"无"也会阻止渲染在转换期间闪烁.

任何帮助表示赞赏.

编辑1

我应该注意到我使用的是OS X.在浏览Parallels的Chrome测试时,我没有看到两个不同的段落表现不同,所以这可能是Macs独有的问题.

我试图在纯CSS中实现"淡出"效果.这是小提琴.我确实在线查看了几个解决方案,但是,在线阅读完文档后,我试图弄清楚为什么幻灯片动画不起作用.有什么指针吗？

这是HTML

.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 slideup {
  0% {
    top: 0px;
  }
  75% {
    top: 0px;
  }
  100% {
    top: -20px;
  }
}

@-moz-keyframes slideup {
  0% {
    top: 0px; …

我有一个关于css3过渡属性的渲染速度的问题.

假设我有许多元素:

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 top; transition: background .2s ease-in}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

我问这个问题的逻辑是,如果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 {
    border: 3px solid #0F0;
    padding: 0;
}

我想在以下过渡(或类似的东西)工作:

border-color: rgba(0,0,0,0);
-webkit-transition: border-color .25s ease-in;  
-moz-transition: border-color .25s ease-in;  
-o-transition: border-color .25s ease-in;  
transition: border-color .25s ease-in; …

我想通过使用不透明度使列表菜单消失而不影响字体.CSS3有可能吗？

怎样才能让鼠标上的字体大小变大？颜色过渡随着时间的推移工作正常,但字体大小由于某种原因立即切换.

示例代码:

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;
 }

我有一个CSS 3动画的div在一段时间后滑入.我想要的是几个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;
    overflow: hidden;
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}
#main-image.fadeInDownBig{
    height: 375px;
}

CSS转换是动画CSS属性更改的非常简洁的方法.任何版本的Internet Explorer都支持它们吗？

我有一个网站,我决定用纯CSS片段替换基于jquery的切换框.当我使用固定高度值进行过渡(CSS的最后一行)时,它运行良好,但是使用该auto值,动画丢失,只有高度变化才有效!

有没有办法使用自动值？我想使用变量文本而不使用脚本.

.ac-container{
  width: 400px;
  margin: 10px auto 30px auto;
  text-align: left;
}
.ac-container label{
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  padding: 5px 20px;
  position: relative;
  z-index: 20;
  display: block;
  height: 30px;
  cursor: pointer;
  color: #777;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
  line-height: 33px;
  font-size: 19px;
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
  background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
  background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
  background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
  background: linear-gradient(top, …

我在使用css3变换旋转过渡的chrome中遇到了问题.转换工作正常,但在完成后元素移动一个像素.另一个奇怪的事情是它只在页面居中(margin:0 auto;)时才会发生.如果你也删除了转换,那么bug仍然存在.

你可以在这里看到它:

http://jsfiddle.net/MfUMd/1/

HTML:

<div class="wrap">
    <img src="https://github.com/favicon.ico" class="target" alt="img"/>
</div>

<div class="wrap">
    <div class="block"></div>
</div>

CSS:

.wrap {
    margin:50px auto;
    width: 100px;
}
.block {
    width:30px;
    height:30px;
    background:black;
}
.target,.block {
    display:block;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.target:hover,.block:hover {
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);  
}

注释掉该margin:0 auto;线以使其消失.

任何人都有任何想法如何在保持页面居中的同时阻止这一点？

我在OSX 10.6.8上使用的是版本24.0.1312.57

干杯