标签: css-transitions

我正在尝试<ul>使用CSS过渡进行滑动.

将<ul>在开始关闭height: 0;.悬停时,高度设置为height:auto;.然而,这导致它只是出现而不是过渡,

如果我从那里height: 40px;开始height: auto;,那么它会向上滑动height: 0;,然后突然跳到正确的高度.

如果不使用JavaScript,我怎么能这样做呢？

#child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
} …

我目前正在设计一种CSS'mega dropdown'菜单 - 基本上是一个普通的CSS-only下拉菜单,但包含不同类型的内容.

目前,似乎CSS3过渡不适用于"display"属性,即你不能做任何类型的过渡display: none到display: block(或任意组合).

当有人将鼠标悬停在其中一个顶级菜单项上时,是否有人会想到上述示例中的第二层菜单可以"淡入"？

我知道你可以在visibility:属性上使用转换,但我想不出有效利用它的方法.

我也尝试过使用身高,但这只是失败了.

我也知道使用JavaScript实现这一点是微不足道的,但是我想挑战自己只使用CSS而且我认为我有点短.

所有和任何建议最受欢迎.

我似乎找不到具有多个属性的CSS转换速记的正确语法.这没有做任何事情:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

我用javascript添加show类.元素变得更高且可见,它不会过渡.在最新的Chrome,FF和Safari中进行测试.

我究竟做错了什么？

编辑:为了清楚,我正在寻找速记版本来缩小我的CSS.所有供应商前缀都足够臃肿.还扩展了示例代码.

CSS Transitions可用于允许文本段落在页面加载时淡入吗？

我真的很喜欢它在http://dotmailapp.com/上的样子,并且喜欢使用CSS使用类似的效果.

注意:此域名已被购买,不再具有上述效果.可以在Wayback Machine上查看存档副本.

插图

有这个标记:

<div id="test">
    <p>?This is a test</p>
</div>??????????????????????????????????????????????????????

使用以下CSS规则:

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}?

如何在加载时触发转换？

这是一个非常直截了当的问题,但我找不到关于CSS过渡属性的非常好的文档.这是CSS片段:

    .nav a
{
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover
{
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

如您所见,过渡属性会相互覆盖.就目前而言,文本阴影将动画,但不是颜色.我怎样让他们同时动画？谢谢你的回答.

我正在尝试使用css悬停在缩略图上进行转换,以便在悬停时,背景渐变淡入.转换不起作用,但如果我只是将其更改为rgba()值,则可以正常工作.是否不支持渐变？我也尝试使用图像,它也不会转换图像.

我知道这是可能的,就像在另一篇文章中有人做过的那样,但我无法弄清楚究竟是怎么回事.任何帮助>这里有一些CSS可以使用:

#container div a {
  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear;
  position: absolute;
  width: 200px;
  height: 150px;
  border: 1px #000 solid;
  margin: 30px;
  z-index: 2
}

#container div a:hover {
  background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}

是否有任何事件由一个元素触发来检查css3转换是否已经开始或结束？

是否可以在不使用Javascript的情况下在页面加载时使用CSS3过渡动画？

这是我想要的,但在页面加载:

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

到目前为止我发现了什么

• CSS3 transition-delay,一种延迟元素影响的方法.仅适用于悬停.
• CSS3关键帧,在加载时工作,但速度极慢.因此没用.
• CSS3过渡速度足够快,但不会在页面加载时设置动画.

可能重复:
iphone webkit css动画导致闪烁

出于某种原因,在我的webkit-transform属性动画发生之前,有轻微的闪烁.这是我在做的事情:

CSS:

#element {
    -webkit-transition: -webkit-transform 500ms;
}

JavaScript的:

$("#element").css("-webkit-transform", "translateX(" + value + "px)");

在转换发生之前,有一个闪烁.知道为什么会这样,以及我如何解决问题？

谢谢!

更新:这只发生在Safari中.虽然动画确实有效,但在Chrome中却不会发生这种情况.

有没有一个跨浏览器解决方案来生成只有CSS的滑入式转换,没有javascript？以下是html内容的示例:

<div>
    <img id="slide" src="http://.../img.jpg />
</div>