标签: css-transitions

本网站左侧菜单中的链接具有CSS3过渡属性,该属性color在鼠标悬停时发生变化.它不能在Chrome 16或17中运行(颜色变化很突然),而网站中的其他转换也是如此.它适用于Firefox,Opera,甚至是Safari,它使用像Chrome这样的webkit,所以我认为它可能不是我的CSS的问题.然后怎样呢？

这是我这部分的CSS(完整的CSS在这里):

#menu a
{
color: gray;
transition: color 0.5s;
-moz-transition:color 0.5s; /* Firefox 4 */
-webkit-transition:color 0.5s; /* Safari and Chrome */
-o-transition:color 0.5s; /* Opera */
}

#menu a:visited
{
color: gray;
}

#menu a:hover
{
color: black;
}

UPDATE!显然,这可能已在18 beta中修复.但是,如果您遇到此问题,请访问下面接受的答案中链接的错误报告并解决问题.

我正在创建一个DOM元素(div),将其添加到DOM,然后在javascript中快速更改其宽度.这在理论上应该触发CSS3过渡,但结果直接从A到B,没有两者之间的过渡.

如果我通过单独的测试点击事件更改宽度,一切都按预期工作.

这是我的JS和CSS:

JS(jQuery):

var div = $('<div />').addClass('trans').css('width', '20px');
$('#container').append(div);
div.css('width', '200px');

CSS(只需mozilla):

.trans {
    -moz-transition-property: all;
    -moz-transition-duration: 5s;
    height: 20px;
    background-color: cyan;
}

我搞砸了这里,还是"一气呵成"并不是应该做的事情？

所有帮助都非常感谢.

动画背景大小属性似乎不适用于Chrome或Safari.

div {
    width: 161px;
    height: 149px;
    background: url(http://3.bp.blogspot.com/_HGPPifzMEZU/Rw4ujF12G3I/AAAAAAAAAWI/bc1ppSb6eKA/s320/estrelas_09.gif) no-repeat center center;
    background-size: 50% 50%;
    transition: background-size 2s ease-in;
    -moz-transition: background-size 2s ease-in;
    -web-kit-transition: background-size 2s ease-in
}
div:hover {
    background-size: 100% 100%
}

<div>
hey
</div>

http://jsfiddle.net/ubcka/14/

当我向下滚动网站显示时,顶部的黑色菜单栏看起来像浮动条.但我认为这涉及到jquery.我尝试过CSS,但似乎并不像我想要的那样为我工作

#menucontainer {
    position:fixed;
    top:0;
    height: 250px
}

#firstElement {
    margin-top: 250px
}

这是我希望菜单的网站基本概念:

http://avathemes.com/WP/Hexic/

我想设置transition-delay的overflow财产body时,div通过添加类的被点击body如下:

$("div").click(function(){
    $("body").addClass("no_overflow");
});

div{
  background:lime;
  height:2000px;
}
.no_overflow{  
 overflow:hidden;
}
body{  
  overflow:auto;
  transition: overflow 0 2s;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm div</div>

但是,这似乎不起作用(没有延迟).我在这里做错了吗？

我知道这可以通过使用setTimeout函数来实现,但是想知道为什么不能使用css转换实现这一点？是否有可以应用css过渡的特定样式属性？

我想在Bootstrap v2.1.0中为两个属性设置动画,

的opacity和margin.

我试过了:

.transition(opacity 0.5s, margin 0.25s);:无输出
.transition('opacity 0.5s, margin 0.25s');:CSS输出无效
.transition(opacity 0.5s); .transition(margin 0.25s);:保证金覆盖不透明度.

请注意,我使用的是lessphp,因此使用JavaScript正则表达式的解决方案将无效.

我知道我可以复制mixin并修改它以接受两个参数,但这看起来很骇人听闻,肯定有更好的方法吗？

我在背景图像上使用CSS3变换来悬停.

我已经在Opera,Safari和Firefox的最新浏览器中进行了测试,并且运行良好且流畅,但是在Chrome中,过渡非常不稳定.

Heres是链接,将鼠标悬停在社交图标上以查看我的意思.. http://www.media-flare.com/pins/ - 我注意到当您将浏览器调整为移动视图时,它会变得更糟.

我在这里做了一个jsfiddle版本,并且因为很难看到它而放慢了转换速度.

http://jsfiddle.net/wsgfz/1/ - 这在chrome和firefox中看起来很生涩,在safari和opera中很流畅.

我能做些什么来使过渡更顺畅吗？

如果你不能查看jsfiddle,这是代码

HTML

.social {
   position: relative;
   list-style:none;
}

.social > li > a {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
   color: transparent;
}

.social > li > a {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
   color: transparent;
}

.fbook, .twit, .tmblr, .pntrst, .insta {
   background: url(http://placehold.it/350x150) center center;
   width: 78px;
   height: 90px;
   background-size: cover;
   float: left;
   margin: 30px;
   -webkit-transition: all 0.8s ease;
   -moz-transition: all 0.8s ease;
   transition: all 0.8s …

是否可以在webkit滚动条上使用转换？我试过了:

div#main::-webkit-scrollbar-thumb {
    background: rgba(255,204,102,0.25);
    -webkit-transition: background 1s;
    transition: background 1s;
}

div#main:hover::-webkit-scrollbar-thumb {
    background: rgba(255,204,102,1);
}

但它不起作用.或者是否可以创建类似的效果(没有JavaScript)？

这是一个显示rgba过渡问题的jsfiddle

我在使用css3动画下拉菜单时遇到了一些麻烦.我需要它来使用css3而不是jQuery或javascript.我已经添加了所有必要的规则,但效果仍然没有发生.有人可以帮忙吗？这是我的代码的小提琴.谢谢.

http://jsfiddle.net/Zmr7u/6/

   html code:                 
                    <header class="main-header">
    <nav class="main-nav">
        <ul class="top-nav">
            <li>
                <a href="#">home</a>
                <ul class="drop-down">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">about</a>
                <ul class="drop-down">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">products</a>
                <ul class="drop-down">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">contacts</a>
                <ul class="drop-down">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>


         css code:

                                nav.main-nav {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: …

我使用CSS转换编写了一个React应用程序.但是这些转换在某些组件中无法正常工作.在我的应用程序中,只有向上移动的组件才能正常运行,向下移动的组件会在没有动画的情况下立即移动.(我希望它们都带动画.)

这是我在那里使用的CSS:

div.canvas {
    position: absolute;
    top: 90px;
    left: 60px;
    width: 640px;
    height: 480px;
    border: 1px solid #999;
    background: white;

}

div.canvas-rect {
    position: relative;
    margin-left: 20px;
    margin-top: 10px;
    height: 20px;
    background: green;

    transition: all 1s linear;
    -moz-transition: all 1s linear; /* Firefox 4 */
    -webkit-transition: all 1s linear; /* Safari ? Chrome */
    -o-transition: all 1s linear; /* Opera */

}

更新:

我还构建了一个codepen.io项目来显示问题.它具有此演示项目的完整代码.

我试图添加一个日志条目componentDidUpdate,componentDidMount以及componentWillUnmount显示是否重新创建或更新这些组件的方法,它表明它们每秒都更新(不重新创建或删除).