你好我想动画width的span里面a的这nav

<nav class="navigator">
   <ul>
    <li><a href="#home">H<span>home</span></a></li>
    <li><a title="What?" href="#what">W<span>what</span></a></li>
    <li><a title="Porfolio" href="#works">P<span>works</span></a></li>
    <li><a title="Who?" href="#who">W<span>who</span></a></li>
    <li><a title="Where?" href="#where">W<span>where</span></a></li>
  </ul>
</nav>

这是它 CSS

header nav ul li a{
    position: relative;
    width: 40px;
    display: block;
    text-decoration: none;
    font-size: 18px;
    color: #000;
}
header nav ul li a:hover span{
    width: auto;
    overflow: visible;
    text-align: right;
}
header nav ul li a span{
    position: absolute;
    width: 0;
    right: 45px;
    overflow: hidden;
    transition:width 0.25s;
    -webkit-transition:width .25s;
    -moz-transition: width …

我试图为letter-spacing属性进行一个很好的CSS转换.

它在Firefox和Internet Explorer 10中看起来很棒(有些东西最终在IE中正常工作.哦,对吧？)

但它在Chrome或Opera中不起作用.在Chrome中,它是一系列抖动,因此它从2px变为1px到0.没有像IE/Firefox那样的平滑像素渲染.

有没有办法让Chrome顺利渲染？

这是一个简单的例子:

p {
    letter-spacing:2px; 
    -webkit-transition: letter-spacing, 1s;
    -moz-transition: letter-spacing, 1s;
    -o-transition: letter-spacing, 1s;
    transition: letter-spacing, 1s;
}
p:hover {letter-spacing:0;}

http://jsfiddle.net/aDhRz/

我为具有css转换的客户端创建了一张贺卡,但我不知道它与IE9不兼容.

贺卡是http://voeux.geekarts.fr/v4.html

有没有办法让这个在IE9中工作？把一个jQuery或任何黑客 - 一些东西让它在IE9中工作.

谢谢

我有一个__CODE__包含一些幻灯片和菜单.

#wrap {
    position: relative;
    top: 0;
    transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}

下面是我的CSS的__CODE__.

<div id="wrap"></div>

任何人都可以解释一下过渡房产在这里做了什么？.

我无法理解它在div上产生的影响.

是否可以使用css3转换文本对齐？例如,我想从左到右动画文本对齐,但是,在text-align上添加过渡属性不起作用.

http://codepen.io/anon/full/lGDwB

有没有办法在flex-box项目的顺序上进行转换？

换句话说,我可以有这个(在这个细节小提琴)

#container {
    display: flex;
}
#container:hover div:last-child {
    order: -1;
}

动画(获得新位置的元素随着时间的推移而假定它的位置),好吗？

我试图通过使用CSS转换来改变悬停元素的背景颜色.我想通过从底部向上滚动来做到这一点.我可以淡化使用它的背景,但我希望它向上滑动:

-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;

另外一个想法是,在应用背景的情况下向上滚动一个单独的元素会更好吗？

有没有办法动画显示:无显示:阻止使用CSS,以便隐藏的div滑下而不是突然出现,或者我应该采取不同的方式？

HTML:

<div id="box">
    Initial Content
    <div class="hidden">
        This is hidden content
    </div>
</div>

CSS:

#box {
    height:auto;
    background:#000;
    color:#fff;
    cursor:pointer;
}
.hidden {
    height:200px;
    display:none;
}
    .hidden.open {
        display:block;
    }

这是我的脚本:

$(document).ready(function() {
    $('#box').click(function() {
        $(this).find(".hidden").toggleClass('open');
    });
});

还有一个JSFiddle

为了覆盖最广泛的浏览器和版本,为CSS添加前缀的正确方法是什么？

版本1:

-webkit-transition: -webkit-transform .3s ease-in-out;
   -moz-transition:    -moz-transform .3s ease-in-out;
    -ms-transition:     -ms-transform .3s ease-in-out;
     -o-transition:      -o-transform .3s ease-in-out;
        transition:         transform .3s ease-in-out;

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

或版本2:

-webkit-transition: transform .3s ease-in-out;
   -moz-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out;
     -o-transition: transform .3s ease-in-out;
        transition  transform .3s ease-in-out;

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

在我看来,当在转换属性上使用供应商前缀时,我还应该定位我想要转换的供应商前缀属性.

我真的找不到任何关闭.

我目前正在为我的网站试验一个按钮。我希望它看起来像一个普通的按钮，但是一旦你将它悬停，它就会变成一个骨头（我的网站是关于狗的）。

所以我使用了一个已经存在的 codepen 项目，我最终得到了这个：

:root {
    --bg: #1a1e24;
    --color: #eee;
    --font: Montserrat, Roboto, Helvetica, Arial, sans-serif;
}

.wrapper {
    padding: 1.5rem 0;
    filter: url('#goo');
}

.bone {
    display: inline-block;
    text-align: center;
    background: var(--color);
    color: var(--bg);
    font-weight: bold;
    padding: 1em 1em 1.03em;
    line-height: 1;
    border-radius: 0.4em;
    position: relative;
    min-width: 8.23em;
    text-decoration: none;
    font-family: var(--font);
    font-size: 1.25rem;
}

.bone:before,
.bone:after {
    width: 2em;
    height: 2em;
    position: absolute;
    content: "";
    display: inline-block;
    background: var(--color);
    border-radius: 50%;
    transition: transform 1s ease;
    transform: scale(0);
    z-index: …