html - 过渡 - 无法获得旋转和更改边距顶部值的跨度

Question

我正在尝试使跨度旋转 90° 并在悬停时更改 margin-top，但失败了。

span 会旋转，但不会改变其 margin-top。

HTML

<div class="cheersWrapper">
    <span class="cheers">
        <h1>Hi!</h1>
    </span>
    <span class="smile">
        <h1>&nbsp; :)</h1>
    </span>
</div>

CSS

.cheersWrapper{
    -webkit-transition-duration: 5s;
    -moz-transition-duration: 5s;
    -o-transition-duration: 5s;
    transition-duration: 5s;
}


.cheersWrapper .smile { 
    display: none;
    position: relative;
}

.cheersWrapper:hover .smile { 
    display: inline-block;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;


    transition: margin-top .5s;
    -webkit-transition: margin-top;
    -moz-transition: margin-top .5s;
    -o-transition: margin-top .5s;

}

.cheersWrapper:hover .smile:hover{

    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);

    margin-top:-25px;

}

.cheersWrapper .cheers{
    display: inline-block; 
}

演示:http://jsfiddle.net/vmrq7ep7/3/

它看起来像是某种帕金森综合症，而且卡住了。

我怎样才能让它的边距顶部动画化？

预先感谢您的帮助。

Answer 1

您可以使用 css translate 而不是 .cheersWrapper:hover .smile:hover 类的边距:

transform:rotate(90deg) translate(0,-25px);

然后为 .cheersWrapper:hover .smile 类设置:

transition-property: transform;

编辑的 jsfiddle:http://jsfiddle.net/vmrq7ep7/4/

顺便说一句，对于 IE9，您应该只需要 -webkit- 前缀和 -ms-。