Questions tagged «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 …

2131 css  css-transitions 

我目前正在设计一个CSS“大型下拉菜单”-基本上是一个常规的仅CSS下拉菜单，但其中包含不同类型的内容。 目前，CSS 3过渡似乎不适用于'display'属性，即，您不能进行从display: none到display: block（或任何组合）的任何过渡。 当有人将鼠标悬停在顶层菜单项之一上时，是否可以使上例中的第二层菜单“淡入”？ 我知道您可以在visibility:属性上使用过渡，但是我想不出一种有效使用过渡的方法。 我也尝试过使用高度，但是不幸地失败了。 我还知道使用JavaScript实现此功能很简单，但是我想挑战一下自己仅使用CSS，而且我想说的还有点不足。

1444 css  css-transitions 

我似乎找不到具有多个属性的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的简写版本。使用所有供应商前缀已经足够enough肿。还扩展了示例代码。

519 css  webkit  css-transitions  shorthand 

CSS过渡可以用于允许文本段落在页面加载时淡入吗？ 我真的很喜欢它在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; }​ 如何在负载上触发转换？

442 css  css-transitions  opacity 

这是一个非常简单的问题，但是我找不到关于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 …

327 animation  css  css-transitions 

我试图在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, …

215 css  gradient  css-transitions 

是否可以在不使用Javascript的情况下在页面加载时使用CSS3过渡动画？ 这是我想要的，但是在页面加载时： http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html 我到目前为止发现的 CSS3 transition-delay，一种延迟对元素的影响的方法。仅适用于悬停。 CSS3 Keyframe，可在负载下工作，但运行速度极慢。因此没有用。 CSS3过渡足够快，但不会在页面加载时进行动画处理。

195 css  webkit  css-transitions  css-animations 

元素是否触发了任何事件来检查css3转换是否已开始或结束？

190 javascript  events  css  transition  css-transitions 

是否有跨浏览器解决方案仅使用CSS而不使用javascript来产生幻灯片过渡？以下是html内容的示例： <div> <img id="slide" src="http://.../img.jpg /> </div>

177 css  css-transitions 

因此，我了解了如何同时执行CSS3过渡和动画。我用谷歌搜索的不清楚是什么时候使用它。 例如，如果我想使球弹跳，很明显，动画是必经之路。我可以提供关键帧，而浏览器将做中间帧，并且我将制作一个漂亮的动画。 然而，在某些情况下，无论哪种方式都可以达到上述效果。一个简单而常见的示例是实现Facebook风格的滑动抽屉菜单： 可以通过以下过渡来实现此效果： .sf-page { -webkit-transition: -webkit-transform .2s ease-out; } .sf-page.out { -webkit-transform: translateX(240px); } http://jsfiddle.net/NwEGz/ 或者，通过类似这样的动画： .sf-page { -webkit-animation-duration: .4s; -webkit-transition-timing-function: ease-out; } .sf-page.in { -webkit-animation-name: sf-slidein; -webkit-transform: translate3d(0, 0, 0); } .sf-page.out { -webkit-animation-name: sf-slideout; -webkit-transform: translateX(240px); } @-webkit-keyframes sf-slideout { from { -webkit-transform: translate3d(0, 0, 0); …

155 css  css-transitions  css-animations 

我正在尝试使用CSS过渡创建“淡入淡出”效果。但是我不能让它与背景图像一起使用... CSS： .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; } .title a:hover { background: transparent; background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background …

121 css  background  background-image  css-transitions 

所以我有以下css过渡附加到a元素： a { -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ; -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in; -o-transition:color 0.1s ease-in, background-color 0.1s ease-in; transition:color 0.1s ease-in, background-color 0.1s ease-in; } 有没有办法禁用特定元素上的这些继承的过渡？ a.tags { transition: none; } 似乎没有完成这项工作。

117 css  transitions  css-transitions 

.item:hover { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } 为什么当我将鼠标悬停在鼠标上时，为什么只在不透明度上设置动画？ 此处的演示：http : //jsfiddle.net/7uR8z/ ​

115 css  css-transitions 

什么是CSS3过渡的区别ease-in，ease-out等等？

111 css  css-transitions 

我想将CSS过渡应用于除背景位置以外的所有属性。我试图这样做： .csstransitions a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .csstransitions a { -webkit-transition: background-position 0s ease 0s; -moz-transition: background-position 0s ease 0s; -o-transition: background-position 0s ease 0s; -ms-transition: background-position 0s ease 0s; transition: background-position …

108 css  css-transitions